- ベストアンサー
画像のロールオーバーを実装する方法とは？
- Dreamweaver8のビヘイビアのスワップイメージを使って画像のロールオーバーを再現する方法を解説します。
- 実装したい内容は、マウスオーバーで画像Aが画像Bに変わり、クリックした状態を保持し、さらに画像Cをマウスオーバーで画像Dに変え、クリックした状態を保持することです。
- 具体的な手順や参考サイト、サンプルソースを紹介し、Dreamweaverでの実装方法について詳しく解説します。
- testid
- お礼率77% (41/53)
- JavaScript
- 回答数1
- ありがとう数4
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
動作イメージが不明の部分があるけれど… クリックした画像だけロールオーバー時の画像に固定されて、他のものはロールオーバーが効くという意味と解釈をした場合の一例です。 <html> <style type="text/css"> img.group {width: 200px; height:150px;} </style> <script type="text/javascript"> var img=['A.jpg,B.jpg','C.jpg,D.jpg','E.jpg,F.jpg']; var elm=[]; var o_idx=-1; window.onload=function(){ var e=document.getElementsByTagName('IMG'); for (var i=0,j=0; i<e.length; i++) if (e[i].className=='group1') elm[j++]=e[i]; for (i=0; i<elm.length; i++){ elm[i].onmouseover=change(i,1); elm[i].onmouseout=change(i,0); elm[i].onclick=change(i,2); } } function change(idx,n){ return function(){ if (n > 1){ if (o_idx > -1) elm[o_idx].src=img[o_idx].split(',')[0]; elm[idx].src=img[idx].split(',')[1]; o_idx=idx; } else { if (idx != o_idx) elm[idx].src=img[idx].split(',')[n]; } };} </script> <body> 画像A:<img class="group1" src="A.jpg"> 画像C:<img class="group1" src="C.jpg"> 画像E:<img class="group1" src="E.jpg"> </body> </html>
お礼
本当にありがとうございます！！！ 思っているとおり 実装することができました！ ありがとうございました！