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