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

ホームページのメニュー部分などにマウスカーソルを重ねると変化するボタンがあります。これをiWebで実現するには、HTMLスニペットとJavaScriptを使います。

このページでは、実際に利用できるJavaScriptなども解説していますので、ちょっとした手間をかけることで、マウスオーバーボタンを作成する事が出来ると思います。ぜひチャレンジしてみてください。

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

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

下の画像にマウスカーソルを重ねてみてください。「B」という画像に切り替わります。
リンクにもなっていますので、クリックすると別ウィンドウでトップページが開きます。

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

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

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

一般的には通常表示用の画像は暗めの画像、マウスを重ねたときに表示される画像は明るめの画像です。
画像は0円のWEB素材屋さんなどの素材を参考に作成してみては如何でしょうか。

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

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

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

通常表示用の画像（A）：/script/changeimg/a.png
マウスを重ねた時の画像（B）：/script/changeimg/b.png

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

次にマウスオーバーを実現する為の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;
}

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

var imgA = "/script/changeimg/a.png";
var imgB = "/script/changeimg/b.png";

function changeImg(){
	document.getElementById( "chgImg" ).src = imgA;
}

function returnImg(){
	document.getElementById( "chgImg" ).src = imgB;
}

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

/script/changeimg/changeimg.js

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

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

<!--Javascriptファイルの呼び出し-->
<script src="/script/changeimg/changeimg.js"></script>

<!--リンクの設定-->
<a href="/" target="_blank">

<!--通常表示用の画像を設定-->
<img src="/script/changeimg/a.png" onMouseOver="changeImg();" onMouseOut="returnImg()" id="chgImg" border="0">
</a>

JavaScriptファイルのURLと通常表示用画像のURL、リンク先のURLは、ご自分の環境に合わせて書き換えてください。
これで、マウスオーバーの画像の設定は完了です。

「役にたった」と思ったらシェアお願いします