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