JavaScriptのサンプル
ポイント時に画像を切りかえる（ロールオーバー）スクリプトです。（リンクテキスト横の画像を切りかえるタイプ）
リンクメニューなどに使えます。画像を先読みするタイプなので、ポイント時のレスポンスが良いです。
使用している画像
- 通常の画像
sankaku_off.gif- ポイント時の画像
sankaku_on.gif
- 2枚の画像が必要になります。
コード
<html>
<head>
<title>TAG index Webサイト</title>
<style type="text/css">
<!--
img {
margin-right: 3px;
vertical-align: top;
}
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などは、ご自分の環境に合わせて設定してください。
青い文字の部分は、必要に応じて書き換えてください。