ポイント時に画像を切りかえる(ロールオーバー)スクリプトです。(特定の画像を切りかえるタイプ)
リンクメニューなどに使えます。画像を先読みするタイプなので、ポイント時のレスポンスが良いです。
【使用している画像】
通常の画像 |
---|
start.jpg |
ポイント時の画像 | ||
---|---|---|
newyork.jpg |
london.jpg |
yokohama.jpg |
<html> <head> <title>HTML index Webサイト</title> <script type="text/javascript"> <!-- if (document.images) { // 設定開始(使用する画像を設定してください) // 通常の画像 var img0 = new Image(); img0.src = "image/start.jpg"; // ポイント時の画像1 var img1 = new Image(); img1.src = "image/newyork.jpg"; // ポイント時の画像2 var img2 = new Image(); img2.src = "image/london.jpg"; // ポイント時の画像3 var img3 = new Image(); img3.src = "image/yokohama.jpg"; // 設定終了 } // ポイント時の処理 function On(name) { if (document.images) { document.images['def'].src = eval(name + '.src'); } } // 放した時の処理 function Off() { if (document.images) { document.images['def'].src = img0.src; } } // --> </script> </head> <body> <p><img src="image/start.jpg" alt="start" name="def"></p> <p> <a href="change3.html" onMouseOver="On('img1')" onMouseOut="Off()">NEW YORK</a> | <a href="change3.html" onMouseOver="On('img2')" onMouseOut="Off()">LONDON</a> | <a href="change3.html" onMouseOver="On('img3')" onMouseOut="Off()">YOKOHAMA</a> </p> </body> </html>
<head> 〜 </head> 内にスクリプトを記述しておき、リンクメニュー部分のアクション(マウスオーバー・マウスアウト)でスクリプトを実行します。
デフォルトでは「通常の画像」を表示 → マウスでポイントすると「ポイント時の画像」を表示 → マウスを放すと「通常の画像」を表示、という流れになります。
// 設定開始 〜 // 設定終了 の部分で、「通常の画像」と「ポイント時の画像」を設定してください。
リンクメニュー部分では、まずはaタグにマウスオーバー、マウスアウトの指定を記述します。
onMouseOver="On('img3')" … ポイント時の指定(マウスオーバー)
onMouseOut="Off()" … 放した時の指定(マウスアウト)
続いてimgタグの src="" に「通常の画像」を指定して、name="def" を追加します。
※img3 の部分は、対象を判別するための名前なので、リンクごとに書き換えます。
【リンクの追加方法】
このスクリプトでは3つのリンクを扱っていますが、以下の方法でリンクを追加していくことができます。
まず、// 設定開始 〜 // 設定終了 の部分で、以下の3行をコピーしてその下に貼り付けます。
// ポイント時の画像3
var img3 = new Image();
img3.src = "image/yokohama.jpg";
貼り付けが完了したら、数字の部分を書き換えます。
// ポイント時の画像4
var img4 = new Image();
img4.src = "image/tokyo.jpg";
続いて、リンクメニュー部分で、リンク部分を1つ分コピーしてその下に貼り付けます。
<a href="change3.html" onMouseOver="On('img3')" onMouseOut="Off()">YOKOHAMA</a>
貼り付けが完了したら、数字の部分を書き換えます。
<a href="change3.html" onMouseOver="On('img4')" onMouseOut="Off()">TOKYO</a>
※画像のファイル名やリンク先のURLなどは、ご自分の環境に合わせて設定してください。
青い文字の部分は、必要に応じて書き換えてください。