iWebでマウスオーバーで変化するボタンを使うには
tips_027
ホームページのメニュー部分などにマウスカーソルを重ねると変化するボタンがあります。これをiWebで実現するには、HTMLスニペットとJavaScriptを使います。
このページでは、実際に利用できるJavaScriptなども解説していますので、ちょっとした手間をかけることで、マウスオーバーボタンを作成する事が出来ると思います。ぜひチャレンジしてみてください。
2009/03/16
iWeb Tips - iWebのコツ -
マウスオーバーボタンのサンプル
まず、マウスオーバーボタンと言われてもピンと来ない人の為に、実際に今回作成するイメージをご紹介します。ボタンらしくはありませんが、下記の画像にマウスを重ねると画像が切り替わります。
スポンサードリンク
その他のTips
アクセスアップ、SEO対策のTips
iWebの機能、更新に関するTips
公開に関するTips
iWeb基本のTips
iWeb Tips：記事一覧
iWeb Tips 記事一覧
マウスカーソルを重ねてみてください。「B」という画像に切り替わります。
リンクにもなっていますので、クリックすると別ウィンドウでiWebでお気軽ホームページのトップページが開きます。
これから、このようなマウスオーバー画像の作り方を解説します。
マウスオーバーボタン用の画像を作成します
最初にマウスオーバーボタン用の画像を作成します。通常表示用の画像Aと、マウスを重ねた時に表示される画像Bを用意します。自分でPhotoShopなどのソフトを使って作成するか、画像素材サイトなどで準備します。
一般的には通常表示用の画像は暗めの画像、マウスを重ねたときに表示される画像は明るめの画像です。
画像は0円のWEB素材屋さんなどの素材を参考に作成してみては如何でしょうか。
←「0円のWEB素材屋さん」 - 私もよく利用させてもらったり、参考にさせてもらっています。
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;
}
作成した画像ファイルをサーバーにアップロードします
作成した画像をサーバーの任意のフォルダにアップロードします。アップロードした後に、画像ファイルをブラウザで表示して、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でアクセスできる場所にアップロードします。
HTMLスニペットでマウスオーバーの画像を配置します
最後にマウスオーバーの画像を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は、ご自分の環境に合わせて書き換えてください。
これで、マウスオーバーの画像の設定は完了です。
運営サイト・ブログ
このサイトはApple iWeb を使用して作成しています。
ご意見などはお問い合わせフォームからお願いいたします。
当サイトは、Yahoo！カテゴリ（Macintosh > アプリケーションソフト）掲載サイトです。
スポンサードリンク
