ベストアンサー

マウスオーバーで他の2個の画像を入れ替えるには？

2005/09/02 21:18

javascript初心者です。何度試してみてもできないので、どなたか教えて下さい。 3つの画像が横に並んでいます。1番目の画像をマウスオーバーすると、2番目、3番目の画像が変わります。2番目の画像をマウスオーバーすると、1番目、3番目のい画像が変わります。3番目の画像をマウスオーオーバーすると、１番目、２番目の画像が変わります。こういった処理がしたいのですが、うまくできません。どなたかよろしくお願いします。（イメージ的にはこんな感じです。これはflash ですが・・・⇒http://www.yamazakipan.co.jp/）

yoppe_001
お礼率75% (3/4)

JavaScript
回答数3
ありがとう数2

みんなの回答 （3）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

ttyp03
ベストアンサー率28% (277/960)

2005/09/03 00:44 回答No.3

＃１です。＃２さん、補足ありがとうございます。 NNのことまでは考えてなかったので助かります。＞マウスアウトしたときに、もとの画像に戻るようにするためには、どうすればよろしいでしょうか？修正してみました。ついでに＃２さんの対応も入れてあります。 <html> <script> img1 = new Array(); img1[0] = new Image(); img1[0].src = "img1_0.jpg"; img1[1] = new Image(); img1[1].src = "img1_1.jpg"; img1[2] = new Image(); img1[2].src = "img1_2.jpg"; img1[3] = new Image(); img1[3].src = "img1_3.jpg"; img2 = new Array(); img2[0] = new Image(); img2[0].src = "img2_0.jpg"; img2[1] = new Image(); img2[1].src = "img2_1.jpg"; img2[2] = new Image(); img2[2].src = "img2_2.jpg"; img2[3] = new Image(); img2[3].src = "img2_3.jpg"; img3 = new Array(); img3[0] = new Image(); img3[0].src = "img3_0.jpg"; img3[1] = new Image(); img3[1].src = "img3_1.jpg"; img3[2] = new Image(); img3[2].src = "img3_2.jpg"; img3[3] = new Image(); img3[3].src = "img3_3.jpg"; function changeImage( no ) { document.img1.src = img1[no].src; document.img2.src = img2[no].src; document.img3.src = img3[no].src; } </script> <body> <img name="img1" src="xxxx" width="50" height="150" onMouseOver="changeImage(1)" onMouseOut="changeImage(0)"> <img name="img2" src="xxxx" width="50" height="150" onMouseOver="changeImage(2)" onMouseOut="changeImage(0)"> <img name="img3" src="xxxx" width="50" height="150" onMouseOver="changeImage(3)" onMouseOut="changeImage(0)"> </body> </html> img1～3オブジェクトの配列0番目にマウスアウトしたときの画像を入れ、以降ずらしました。また onMouseOver の関数名を changeImage に変更し、onMouseOut イベントでも呼び出すようにしました。相変わらずテストはしてないので動作確認お願いします。

質問者

お礼 2005/09/03 01:18

すべて、思い通りにできました。本当にありがとうございました。（こんなおそくまでお付き合いいただき、申し訳ないです）昨日よりscriptが理解できるようになり、嬉しいです。(*^.^*)これからも頑張ります☆

ログインすると、全ての回答が全文表示されます。

その他の回答 (2)

665
ベストアンサー率72% (18/25)

2005/09/02 22:49 回答No.2

#1の方法は現在も一部のブラウザが未対応（Netscape7など）なので次のように書き換えた方がいいように思えます。まずIMG要素のidをnameに、 <img id="img*" src="xxxx" width="50" height="150" onMouseOver="onMouseOver(0)"> 　　↓ <img name="img*" src="xxxx" width="50" height="150" onMouseOver="onMouseOver(0)"> onMouseOver関数は function onMouseOver( no ) { document.all.img1.src = img1[no].src; document.all.img2.src = img2[no].src; document.all.img3.src = img3[no].src; } 　　↓ function onMouseOver( no ) { document.img1.src = img1[no].src; document.img2.src = img2[no].src; document.img3.src = img3[no].src; } これでIE4、NN3以降のブラウザに対応できます。

質問者

お礼 2005/09/03 01:16

適切な回答をありがとうございます。思い通りに作ることができました(*^.^*)

ログインすると、全ての回答が全文表示されます。

ttyp03
ベストアンサー率28% (277/960)

2005/09/02 21:54 回答No.1

ほとんどテストしてませんが（画像を用意するのが面倒だった…）作ってみました。 <html> <script> img1 = new Array(); img1[0] = new Image(); img1[0].src = "img1_1.jpg"; img1[1] = new Image(); img1[1].src = "img1_2.jpg"; img1[2] = new Image(); img1[2].src = "img1_3.jpg"; img2 = new Array(); img2[0] = new Image(); img2[0].src = "img2_1.jpg"; img2[1] = new Image(); img2[1].src = "img2_2.jpg"; img2[2] = new Image(); img2[2].src = "img2_3.jpg"; img3 = new Array(); img3[0] = new Image(); img3[0].src = "img3_1.jpg"; img3[1] = new Image(); img3[1].src = "img3_2.jpg"; img3[2] = new Image(); img3[2].src = "img3_3.jpg"; function onMouseOver( no ) { document.all.img1.src = img1[no].src; document.all.img2.src = img2[no].src; document.all.img3.src = img3[no].src; } </script> <body> <img id="img1" src="xxxx" width="50" height="150" onMouseOver="onMouseOver(0)"> <img id="img2" src="xxxx" width="50" height="150" onMouseOver="onMouseOver(1)"> <img id="img3" src="xxxx" width="50" height="150" onMouseOver="onMouseOver(2)"> </body> </html> img1オブジェクトには一番左側の画像の配列。 0番目が一番左にマウスが乗ったとき、 1番目が真ん中にマウスが乗ったとき、 2番目が一番右にマウスが乗ったときの画像です。同様にimg2,img3の画像を設定してください。 IMGタグのsrcには最初に表示する画像を指定してください。

質問者