ポイント時に画像を切りかえる(ロールオーバー)スクリプトです。(リンクテキスト横の画像を切りかえるタイプ)
リンクメニューなどに使えます。画像を先読みするタイプなので、ポイント時のレスポンスが良いです。
【使用している画像】
通常の画像 | ポイント時の画像 |
---|---|
sankaku_off.gif | sankaku_on.gif |
※2枚の画像が必要になります。
<html> <head> <title>HTML index Webサイト</title> <style type="text/css"> <!-- img { margin-right: 3px; vertical-align: middle; } ul { margin: 0; padding: 0; list-style-type: none; } --> </style> <script type="text/javascript"> <!-- if (document.images) { // 設定開始(使用する画像を設定してください) var on = new Image(); on.src = "image/sankaku_on.gif"; // ポイント時の画像 var off = new Image(); off.src = "image/sankaku_off.gif"; // 通常の画像 // 設定終了 } // ポイント時の処理 function On(name) { if (document.images) { document.images[name].src = on.src; } } // 放した時の処理 function Off(name) { if (document.images) { document.images[name].src = off.src; } } // --> </script> </head> <body> <ul> <li><img src="image/sankaku_off.gif" alt="s1" name="img1"><a href="change2.html" onMouseOver="On('img1')" onMouseOut="Off('img1')">Sample1</a></li> <li><img src="image/sankaku_off.gif" alt="s2" name="img2"><a href="change2.html" onMouseOver="On('img2')" onMouseOut="Off('img2')">Sample2</a></li> <li><img src="image/sankaku_off.gif" alt="s3" name="img3"><a href="change2.html" onMouseOver="On('img3')" onMouseOut="Off('img3')">Sample3</a></li> <li><img src="image/sankaku_off.gif" alt="s4" name="img4"><a href="change2.html" onMouseOver="On('img4')" onMouseOut="Off('img4')">Sample4</a></li> <li><img src="image/sankaku_off.gif" alt="s5" name="img5"><a href="change2.html" onMouseOver="On('img5')" onMouseOut="Off('img5')">Sample5</a></li> </ul> </body> </html>
<head> 〜 </head> 内にスクリプトを記述しておき、リンクメニュー部分のアクション(マウスオーバー・マウスアウト)でスクリプトを実行します。
デフォルトでは「通常の画像」を表示 → マウスでポイントすると「ポイント時の画像」を表示 → マウスを放すと「通常の画像」を表示、という流れになります。
// 設定開始 〜 // 設定終了 の部分で、「通常の画像」と「ポイント時の画像」を設定してください。
リンクメニュー部分では、まずはaタグにマウスオーバー、マウスアウトの指定を記述します。
onMouseOver="On('img3')" … ポイント時の指定(マウスオーバー)
onMouseOut="Off('img3')" … 放した時の指定(マウスアウト)
続いてimgタグの src="" に「通常の画像」を指定して、name="img3" を追加します。
※img3 の部分は、対象を判別するための名前なので、リンクごとに書き換えます。
【リンクの追加方法】
このスクリプトでは5つのリンクを扱っていますが、以下の方法でリンクを追加していくことができます。
リンクメニュー部分で、リンク部分を1つ分コピーしてその下に貼り付けます。
<li><img src="image/sankaku_off.gif" alt="s5" name="img5"><a href="change2.html" onMouseOver="On('img5')" onMouseOut="Off('img5')">Sample5</a></li>
貼り付けが完了したら、数字の部分を書き換えます。
<li><img src="image/sankaku_off.gif" alt="s6" name="img6"><a href="change2.html" onMouseOver="On('img6')" onMouseOut="Off('img6')">Sample6</a></li>
※画像のファイル名やリンク先のURLなどは、ご自分の環境に合わせて設定してください。
青い文字の部分は、必要に応じて書き換えてください。