WEST MiRa JavaScript：サンプル集(257種類) - 画像 - ロールオーバー Ver2（画像すり替え・複数対応版）

[ JavaScriptの目次 ]

▲トップページ
▲基礎知識
▲基本操作
▲その他
▲サンプル集(257種類)
▲その他

[ 他の一覧 ]

◆↑ホームへ

■ JavaScript - サンプル集(257種類) - 画像
　　 - ロールオーバー Ver2（画像すり替え・複数対応版）

ポイントされると絵が変わるスクリプトです。
このスクリプトは、一つのページでお好きなだけロールオーバーさせる事が出来ます。
例えばメニュー項目ごとに、違う画像を使いたい場合に使用できます。

・サンプルを見る
・ソースを保存する
（右クリック→「対象をファイルに保存」or「リンクを名前を付けて保存」して下さい。）
・ソースを見る
・解説を見る

[ ソース ]


<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">

<script language="JavaScript">
<!--//Copyright (C) WEST MiRa http://www.west-mira.jp

	pic_name=new Array();	pic_name2=new Array();

	//1つ目のマウスオーバーした時の画像を指定する
	pic_name[0] ="0.gif";
	//1つ目のマウスアウトした時の画像を指定する
	pic_name2[0]="1.gif";

	//2つ目のマウスオーバーした時の画像を指定する
	pic_name[1] ="2.gif";
	//2つ目のマウスアウトした時の画像を指定する
	pic_name2[1]="3.gif";

	//3つ目のマウスオーバーした時の画像を指定する
	pic_name[2] ="4.gif";
	//3つ目のマウスアウトした時の画像を指定する
	pic_name2[2]="5.gif";

	//4つ目のマウスオーバーした時の画像を指定する
	pic_name[3] ="6.gif";
	//4つ目のマウスアウトした時の画像を指定する
	pic_name2[3]="7.gif";

	pic1=new Array();
	pic2=new Array();

	for(i=0; i<pic_name.length; i++)
		{
		pic1[i]=new Image();	pic1[i].src=pic_name[i];
		pic2[i]=new Image();	pic2[i].src=pic_name2[i];
		}

	function mouse_in(dotti)
		{document.images["link"+dotti].src=pic1[dotti].src;}
	function mouse_out(dotti)
		{document.images["link"+dotti].src=pic2[dotti].src;}

//-->
</script>

</head>

<body>

<a href="../../index.html#JavaScript" onMouseOver="mouse_in(0);" onMouseOut="mouse_out(0);">
<img border="0" src="1.gif" name="link0">
</a>

　

<a href="../../index.html#JavaScript" onMouseOver="mouse_in(1);" onMouseOut="mouse_out(1);">
<img border="0" src="3.gif" name="link1">
</a>

　

<a href="../../index.html#JavaScript" onMouseOver="mouse_in(2);" onMouseOut="mouse_out(2);">
<img border="0" src="5.gif" name="link2">
</a>

　

<a href="../../index.html#JavaScript" onMouseOver="mouse_in(3);" onMouseOut="mouse_out(3);">
<img border="0" src="7.gif" name="link3">
</a>

</body></html>

[ 解説 ]

まずすりかえに使う画像を用意します。
何枚でもお好きなだけご用意下さい。

スクリプト内の変更出来る箇所は注釈を付けておりますので、変更方法などはそちらをご参照下さい。

もしすり替えが4組以下の場合は、不要な行を削除して下さい。
その際、必ず下から消してください。

例えばすり替えを2組しか使わない場合、pic_name[2]の行とpic_name[3]の行を消してください。

反対にすり替えが4組以上ある場合は、行を増やしてあげます。
pic_name[3]="kabe";
をコピーして、その真下に張り付けます。

ファイル名は同じ要領で変更して下さい。
次に、数字の「3」の部分を1作り上げて「4」にします。
もっと増やしたい場合は、同じ要領でコピーペーストし、数字部分をどんどん繰り上げていって下さい。

例）

追加前

追加後

//1つ目のマウスオーバーした時の画像を指定する
pic_name[0] ="../link.gif";
//1つ目のマウスアウトした時の画像を指定する
pic_name2[0]="../link2.gif";

//2つ目のマウスオーバーした時の画像を指定する
pic_name[1] ="../button.gif";
//2つ目のマウスアウトした時の画像を指定する
pic_name2[1]="../button2.gif";

//3つ目のマウスオーバーした時の画像を指定する
pic_name[2] ="../new.gif";
//3つ目のマウスアウトした時の画像を指定する
pic_name2[2]="../new2.gif";

//4つ目のマウスオーバーした時の画像を指定する
pic_name[3] ="../0.gif";
//4つ目のマウスアウトした時の画像を指定する
pic_name2[3]="../1.gif";

次にボディ内にIMGタグを設置します。

<a href="library.html" onMouseOver="mouse_in(3);" onMouseOut="mouse_out(3)">
<img border="0" src="link.gif" name="link3">
</a>

上の3行で1つのアンカーが形成されています。

画像URL、サイズ、その他HTML要素は必要に応じてご変更下さい。
画像すり替えが4組以内でタグが多い場合は、1つにつき3行まとめて削除して下さい。

もし画像すり替えが4組以上ある場合は、上の3行をコピーペーストして張り付けて下さい。
同じように必要事項を変更した後、必ず変更して頂きたいのは、赤字で「3」と書かれた3つの箇所です。

これも先ほどと同じく、1つ数字を繰り上げて下さい。
「3」の部分を「4」に変更します。
さらに増やすなら「5」、「6」……と、どんどん繰り上げていって下さい。

サンプル・ライブラリ・素材　-　All About ［JavaScript］

　 WEST MiRa > JavaScript > サンプル集(257種類) > 画像 > ロールオーバー Ver2（画像すり替え・複数対応版） >

バナー、リンクについて , 利用規約 , ヘルプ