JavaScriptのサンプル
ポイント時に画像を切りかえる（ロールオーバー）スクリプトです。（特定の画像を切りかえるタイプ）
リンクメニューなどに使えます。画像を先読みするタイプなので、ポイント時のレスポンスが良いです。
使用している画像
- 通常の画像
start.jpg
- ポイント時の画像
newyork.jpg
london.jpg
yokohama.jpg
コード
<html>
<head>
<title>TAG 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などは、ご自分の環境に合わせて設定してください。
青い文字の部分は、必要に応じて書き換えてください。