• ベストアンサー
※ ChatGPTを利用し、要約された質問です(原文:画像のロールオーバー)

画像のロールオーバーを実装する方法とは?

このQ&Aのポイント
  • Dreamweaver8のビヘイビアのスワップイメージを使って画像のロールオーバーを再現する方法を解説します。
  • 実装したい内容は、マウスオーバーで画像Aが画像Bに変わり、クリックした状態を保持し、さらに画像Cをマウスオーバーで画像Dに変え、クリックした状態を保持することです。
  • 具体的な手順や参考サイト、サンプルソースを紹介し、Dreamweaverでの実装方法について詳しく解説します。

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

  • ベストアンサー
  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.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>

testid
質問者

お礼

本当にありがとうございます!!! 思っているとおり 実装することができました! ありがとうございました!

関連するQ&A

専門家に質問してみよう