JavaScriptのサンプル

ポイント時に画像を切りかえる(ロールオーバー)スクリプトです。(リンクボタンの画像を切りかえるタイプ)

リンクメニューなどに使えます。画像を先読みするタイプなので、ポイント時のレスポンスが良いです。

  • sample1
  • sample2
  • sample3
  • sample4
  • sample5

使用している画像

通常の画像
sample1 1off.gif
ポイント時の画像
sample1 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などは、ご自分の環境に合わせて設定してください。

青い文字の部分は、必要に応じて書き換えてください。