
iWebでマウスオーバーで変化するボタンを使うには
ホームページのメニュー部分などにマウスカーソルを重ねると変化するボタンがあります。これをiWebで実現するには、HTMLスニペットとJavaScriptを使いま […]
- 2016/5/4
- 2009/3/16
ホームページのメニュー部分などにマウスカーソルを重ねると変化するボタンがあります。これを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は、ご自分の環境に合わせて書き換えてください。
これで、マウスオーバーの画像の設定は完了です。
iWebについて
iWebは2011年7月に公開されたバージョン3.0.4以降、アップデートされておらず、最新のOSX環境で正常に動作するか分かりません。
そのため、MacでWebサイトの作成をする場合は、有料で販売されているソフトか、WordPressなどのCMSを利用されることをお勧めします。
WordPressの導入から基本的な使い方、プラグインの活用、テーマのカスタマイズまで、WordPressの使い方全般をまとめています。
無料で利用できるホームページ作成ソフトには、オープンソースのKompozerもありますが、こちらのソフトも2011年以降バージョンアップしておらず、最新環境で正常に動作するか分かりません。