WEST MiRa JavaScript：サンプル集(257種類) - 画像 - ロールオーバー Ver3（異なる位置の画像すり替え）

[ JavaScriptの目次 ]

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

[ 他の一覧 ]

◆↑ホームへ

■ JavaScript - サンプル集(257種類) - 画像
　　 - ロールオーバー Ver3（異なる位置の画像すり替え）

All About ［SOHO・在宅ワーク］

ポイントされると絵が変わるスクリプトです。
このスクリプトは、ポイントされた画像ではなく、別の位置にある画像をすり替える事ができます。

・サンプルを見る
・ソースを保存する
（右クリック→「対象をファイルに保存」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();

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

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

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

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

	//マウスアウトした時の画像を指定する
	pic_name2="8.gif";

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

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

//-->
</script>

</head>

<body>

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

　

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

　

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

　

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

<br><br><br><br>
<img border="0" src="8.gif" name="RollPics" align="bottom">

</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」……と、どんどん繰り上げていって下さい。

★今週の売れ筋コスメはこれ！早速チェック★

　 WEST MiRa > JavaScript > サンプル集(257種類) > 画像 > ロールオーバー Ver3（異なる位置の画像すり替え） >

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