画像のすり替え その２
ともさんからのリクエストで、 マウスのポイントで変わるコメントプログラムを紹介します。 マウスで、ポイントするとリンク右の コラムの画像がすれ変わります。 リンク先の説明なんか載せておくと好いですね。 このサンプルを使うには、リンクの数プラス１つの画像が必要です。 マウスでポイントされたら、指定の画像とデフォルト画像を 入れ替えます。
      |
|
<Script language="JavaScript">
<!--
var comment=6;
//---- PreLoad
img=new Array(6);
img[0]= new Image();
img[0].src="new.gif";
img[1]= new Image();
img[1].src="music.gif";
img[2]= new Image();
img[2].src="s_intro.gif";
img[3]= new Image();
img[3].src="thank.gif";
img[4]= new Image();
img[4].src="bbs.gif";
img[5]= new Image();
img[5].src="link.gif";
//--- switch Images
function changeImg(n){
document.images[comment].src=img[n].src;
}
function defImg(){
document.images[comment].src="tomoImg/default.gif";
}
//-->
</Script>
|
この上のコードを <Head>〜</head> のなかにコピーしてください。 上のコードで赤で書かれている部分に変更が必要だと思いますｷ。 これは、入れ替える画像が上から何番目にあるかを示しています。 このページでの例の場合7番目の画像を入れ替えたいので、（０から数えるので） ６を当てはめることになります。
ともさんのページの場合ここには、8がくると思います。
次に青で書かれている部分ですが、 これがそれぞれのコメントが書かれた画像ファイル名 になります。 画像ファイルの名前を変えたら、 ここの画像ファイル指定の名前も変えてください。
HTMLコード
<table align="center"><td width="200" height="240">
<A href="*****" onMouseOver="changeImg(0)" onMouseOut="defImg()">
<IMG src="****.gif" border=0></A><br>
<A href="*****" onMouseOver="changeImg(1)" onMouseOut="defImg()">
<IMG src="****.gif" border=0></A><br>
<A href="*****" onMouseOver="changeImg(2)" onMouseOut="defImg()">
<IMG src="****.gif" border=0></A><br>
<A href="*****" onMouseOver="changeImg(3)" onMouseOut="defImg()">
<IMG src="****.gif" border=0></A><br>
<A href="*****" onMouseOver="changeImg(4)" onMouseOut="defImg()">
<IMG src="****.gif" border=0></A><br>
<A href="*****" onMouseOver="changeImg(5)" onMouseOut="defImg()">
<IMG src="****.gif" border=0></A><br>
</td>
<td>
<img src="default.gif">
</td>
</table>
|
次にBodyないのHTMLコードを紹介します。 上のコードを見てください。 基本的には、これをそのまま表示したい場所に コピーすれば大丈夫です。 赤で書かれた部分が、書き加えられているのがわかるでしょうか? これが、マウスが重なった場合と、 マウスが、リンクから離れたときの 命令をしていることになります。 あまり深く気にしなくっていいのですが、 onMouseOver=changImg(#)の値が、それぞれ０〜５まで違うのに注意してください。 重要です。
最後の青で書かれた画像ファイルが
これから入れ替わる画像です。
はじめは、default.gifを表示してあります。