記事検索：

 
 

まず、マウスオーバーボタンと言われてもピンと来ない人の為に、実際に今回作成するイメージをご紹介します。ボタンらしくはありませんが、下記の画像にマウスを重ねると画像が切り替わります。

マウスカーソルを重ねてみてください。「B」という画像に切り替わります。

リンクにもなっていますので、クリックすると別ウィンドウでiWebでお気軽ホームページのトップページが開きます。

これから、このようなマウスオーバー画像の作り方を解説します。

最初にマウスオーバーボタン用の画像を作成します。通常表示用の画像Aと、マウスを重ねた時に表示される画像Bを用意します。自分でPhotoShopなどのソフトを使って作成するか、画像素材サイトなどで準備します。

一般的には通常表示用の画像は暗めの画像、マウスを重ねたときに表示される画像は明るめの画像です。

画像は0円のWEB素材屋さんなどの素材を参考に作成してみては如何でしょうか。

「0円のWEB素材屋さん」 - 私もよく利用させてもらったり、参考にさせてもらっています。
 

次にマウスオーバーを実現する為のJavaScriptファイルを用意します。下記のソースコードをコピーして、miなどのテキストエディタでJavaScriptファイルを作成してください。ファイル名は「changeimg.js」とします。

var imgA = "【通常表示用の画像のURL】";

var imgB = "【マウスを重ねた時の画像のURL】";


function changeImg(){

document.getElementById( "chgImg" ).src = imgA;

}


function returnImg(){

document.getElementById( "chgImg" ).src = imgB;

}

作成した画像をサーバーの任意のフォルダにアップロードします。アップロードした後に、画像ファイルをブラウザで表示して、URLをコピーしておきます。コピーしたURLは、この後に編集するJavaScriptファイルで使います。

サンプルの「A」「B」という画像は、下のURLでアクセスできる場所にアップロードしてあります。これ以降はこのURLをサンプルに解説をします。


通常表示用の画像（A）：http://lblevery.com/script/changeimg/a.png

マウスを重ねた時の画像（B）：http://lblevery.com/script/changeimg/b.png

このままではJavaScriptは動きません。そこで、先ほどコピーをしておいた通常表示用の画像URLと、マウスを重ねた時の画像URLを、このファイルに書き込みます。

それぞれのURLを書き換えると、下記のようになります。

var imgA = "http://lblevery.com/script/changeimg/a.png";

var imgB = "http://lblevery.com/script/changeimg/b.png";


function changeImg(){

document.getElementById( "chgImg" ).src = imgA;

}


function returnImg(){

document.getElementById( "chgImg" ).src = imgB;

}

画像URLの設定を行った「changeimg.js」をサーバーにアップロードします。ここでは下記のURLでアクセスできる場所にアップロードします。

http://lblevery.com/script/changeimg/changeimg.js

最後にマウスオーバーの画像をHTMLスニペットで配置します。HTMLスニペットで設定するHTMLのコードは以下のようになります。

<!--Javascriptファイルの呼び出し-->

<script src="http://lblevery.com/script/changeimg/changeimg.js"></script>


<!--リンクの設定-->

<a href="http://lblevery.com/" target="_blank">


<!--通常表示用の画像を設定-->

<img src="http://lblevery.com/script/changeimg/a.png" onMouseOver="changeImg();" onMouseOut="returnImg()" id="chgImg" border="0">

</a>

JavaScriptファイルのURLと通常表示用画像のURL、リンク先のURLは、ご自分の環境に合わせて書き換えてください。

これで、マウスオーバーの画像の設定は完了です。

ホーム > iWeb Lab > iWeb Tips > iWebでマウスオーバーで変化するボタンを使うには

  1. iWebでマウスオーバーで変換するボタンを使うには

マウスオーバーボタンのサンプル

マウスオーバーボタン用の画像を作成します

作成した画像ファイルをサーバーにアップロードします

Javascriptのファイルを用意してサーバーにアップロードします

HTMLスニペットでマウスオーバーの画像を配置します

このサイトはApple iWeb を使用して作成しています。

ご意見などはお問い合わせフォームからお願いいたします。

当サイトは、Yahoo！カテゴリ（Macintosh > アプリケーションソフト）掲載サイトです。

アドセンスで月1万円の収入を

Macのホームページ作成ガイド

iWeb SEO対策ソフト - Sadd

RSS購読