- ベストアンサー
複数の画像を連動してロールオーバーさせたいのですが
宜しくお願い致します。 現在WEBショップを運営しているのですが、 「商品一覧ページ」から「商品詳細ページ」へリンクする画像が3つあり、 現在、それぞれの画像は個別にはロールオーバーするのですが、 3つの画像のどこにポインタを当てても、3つの画像全てが連動してロールオーバーするようにするにはどうすれば良いのでしょうか？ （3つの画像のリンク先は全て同じです） どなたかご存知な方がいらっしゃいましたらご教授頂けると幸いです。 宜しくお願い致します。 <td><p><A href="リンク先(1)" ><img src="img/商品名_1.gif" alt="" onmouseover="this.src='img/商品名_2.gif'" onmouseout="this.src='img/商品名_1.gif'" width="133" height="28" /></A></p> <p><A href="リンク先(1)" ><img src="img/詳細ページ_1.gif" alt="" onmouseover="this.src='img/詳細ページ_2.gif'" onmouseout="this.src='img/詳細ページ_1.gif'" width="133" height="18" /></A></p>
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは。 ソースに手を加えるならそれぞれのimgにid（a・b・c）をつけて <p><A href="リンク先(1)" ><img src="img/商品名_1.gif" alt="" onmouseover="a.src='img/商品名_2.gif';b.src='img/商品名_2.gif';c.src='img/商品名_2.gif'" onmouseout="a.src='img/商品名_1.gif';b.src='img/商品名_1.gif';c.src='img/商品名_1.gif'" id="a" /></A></p> <p><A href="リンク先(1)" ><img src="img/商品名_1.gif" alt="" onmouseover="a.src='img/商品名_2.gif';b.src='img/商品名_2.gif';c.src='img/商品名_2.gif'" onmouseout="a.src='img/商品名_1.gif';b.src='img/商品名_1.gif';c.src='img/商品名_1.gif'" id="b" /></A></p> <p><A href="リンク先(1)" ><img src="img/商品名_1.gif" alt="" onmouseover="a.src='img/商品名_2.gif';b.src='img/商品名_2.gif';c.src='img/商品名_2.gif'" onmouseout="a.src='img/商品名_1.gif';b.src='img/商品名_1.gif';c.src='img/商品名_1.gif'" id="c" /></A></p> とすれば実現できますよ。
その他の回答 (1)
- fujillin
- ベストアンサー率61% (1594/2576)
同じ動きをするものは、みな同じ画像から別の同じ画像に変わるという前提で… グルーピングして同じクラス名を設定しておけば、同じ動き（ロールオーバー）をするという例です。 複数のグルーピングにも対応しているので、少々長くなっています。 最初のところで、 「クラス名（=グループ名）」：「最初の画像URL」,「ロールオーバー時の画像URL」をセットにして、必要なセット数だけ定義しておいてください。 （クラス名を設定しなければ、同じ画像があっても変化はしません） <html> <head> <script type="text/javascript"> var ro={}; var img=[]; window.onload=function(){ //*** ロールオーバーの設定 *** //'クラス名:元表示画像,ロールオーバー時の画像' で指定 var def=[ 'over1:A.jpg,C.jpg', 'over2:B.jpg,D.jpg' ]; //*** ここまで*** for (var j=0; j<def.length; j++){ var e=def[j].split(':'); ro[e[0]]=e[1].split(','); } e=document.getElementsByTagName('IMG'); for (var i=0,j=0; i<e.length; i++){ if (e[i].className && ro[e[i].className]){ img[j++]=e[i]; e[i].onmouseover=function(){rover(this.className,1);}; e[i].onmouseout=function(){rover(this.className,0)}; };} } function rover(c,n) { for (var i=0; i<img.length; i++){ if (img[i].className==c) img[i].src=ro[c][n]; } } </script> </head> <body> <br><a href="#"><img class="over1" src="A.jpg">クラス1</a> <br><a href="#"><img class="over2" src="B.jpg">クラス2</a> <br><a href="#"><img class="over1" src="A.jpg">クラス1</a> <br><a href="#"><img class="over2" src="B.jpg">クラス2</a> <br><a href="#"><img src="A.jpg">クラスなし</a> <br><a href="#"><img src="B.jpg">クラスなし</a> </body> </html>
お礼
fujillin様 早速のご回答有難う御座います。 色々な方法があるのですね。 今後の参考にさせて頂きたいと思います。 ご親切に有難う御座いました。
お礼
font_color様 早速のご回答有難う御座います。 教えて頂いたままにidを付けてソースを変更したら 希望通りの動きをしてくれました。 お陰様で助かりました。 ご親切に本当に有難う御座いました。