複数の画像を連動してロールオーバーさせたいのですが

解決済

質問者：chisham
質問日時：2009/04/21 11:29
回答数：2件

宜しくお願い致します。
現在WEBショップを運営しているのですが、
「商品一覧ページ」から「商品詳細ページ」へリンクする画像が3つあり、
現在、それぞれの画像は個別にはロールオーバーするのですが、
3つの画像のどこにポインタを当てても、3つの画像全てが連動してロールオーバーするようにするにはどうすれば良いのでしょうか？
（3つの画像のリンク先は全て同じです）

どなたかご存知な方がいらっしゃいましたらご教授頂けると幸いです。
宜しくお願い致します。

<td><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>

<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>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： font_color
回答日時：2009/04/21 13:00

こんにちは。

ソースに手を加えるならそれぞれのimgにid（a・b・c）をつけて

<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>
<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>
<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>

とすれば実現できますよ。

- 0
- 件

通報する

この回答へのお礼

font_color様
早速のご回答有難う御座います。
教えて頂いたままにidを付けてソースを変更したら
希望通りの動きをしてくれました。
お陰様で助かりました。
ご親切に本当に有難う御座いました。

通報する

お礼日時：2009/04/21 13:49

No.2

回答者： fujillin
回答日時：2009/04/21 13:21

同じ動きをするものは、みな同じ画像から別の同じ画像に変わるという前提で…

グルーピングして同じクラス名を設定しておけば、同じ動き（ロールオーバー）をするという例です。
複数のグルーピングにも対応しているので、少々長くなっています。
最初のところで、
　「クラス名（=グループ名）」：「最初の画像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>
 <a href="#"><img class="over1" src="A.jpg">クラス1</a>
 <a href="#"><img class="over2" src="B.jpg">クラス2</a>
 <a href="#"><img class="over1" src="A.jpg">クラス1</a>
 <a href="#"><img class="over2" src="B.jpg">クラス2</a>
 <a href="#"><img src="A.jpg">クラスなし</a>
 <a href="#"><img src="B.jpg">クラスなし</a>
</body>
</html>