- ベストアンサー
画像の切り替え
教えてください。 画像がはじめに1つ表示されていて、 横にサムネイルが2つあり、 サムネイルのマウスオーバーで、その画像が大きく表示され、 マウスオーバーで、元の画像へと表示が戻り、 サムネイルのクリックで、その画像が大きく表示されたまま固定となる ということがしたいのですが、 マウスオーバー、マウスアウトはとりあえず実装できたのですが、 マウスクリックを実装しても、 やはり、マウスアウトで画像が切り替わってしまいます。 どうしたらいいのでしょうか？ <IMG src="images/a.jpg" id="display" name="display" width="100" height="100" border="0"> <a href="javascript:;" onClick="document.display.src='images/a.jpg'" onMouseOver="MM_swapImage('display','','images/item/a.jpg',1)" onMouseOut="MM_swapImgRestore()"> <IMG src="images/item/a.jpg" width="20" height="20" border="0" name="thumb1" id="thumb1"> </a> <a href="javascript:;" onMouseOver="MM_swapImage('display','','images/b.jpg',1)" onMouseOut="MM_swapImgRestore()" onClick="document.display.src='images/b.jpg'"> <IMG src="images/b.jpg" width="20" height="20" border="0" name="thumb2" id="thumb2"> </a> 以上 よろしくお願いします。
- angelinaane
- お礼率68% (53/77)
- JavaScript
- 回答数2
- ありがとう数3
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
MM_swapImage()ってDreamweaverかなにかのスクリプトだと思うのだけれど、中身がわからないので… id="thumbnail"の中にあるimgに対して有効（いくつあっても可） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head><title>test</title> <style type="text/css"> img#display { width:100px; height:100px; border:0; } #thumbnail { display:inline; }/* ←レイアウト不明：不要か?*/ #thumbnail img { width:20px; height:20px; border:0; } </style> <script type="text/javascript"> <!-- var thumb = { src:'', func: function(evt) { var t = evt.target || evt.srcElement; if (t.nodeName != 'IMG') return; var d = document.getElementById('display'); if (evt.type == 'mouseover') { d.src = t.src; } else if (evt.type == 'mouseout') { d.src = thumb.src; } else if (evt.type == 'click') { thumb.src = t.src; } }, init: function() { thumb.src = document.getElementById('display').src; var elm = document.getElementById('thumbnail'); addEvent(elm, 'mouseover', thumb.func); addEvent(elm, 'mouseout', thumb.func); addEvent(elm, 'click', thumb.func); function addEvent(e, evt, func) { if(e.addEventListener) e.addEventListener(evt, func, false); else if(e.attachEvent) e.attachEvent('on' + evt, func); } } } window.onload = thumb.init; --> </script> </head> <body> <img src="A.jpg" id="display"> <div id="thumbnail"> <img src="B.jpg"> <img src="C.jpg"> <img src="D.jpg"> </div> </body> </html>
その他の回答 (1)
- nine999
- ベストアンサー率44% (512/1140)
クリックしたときに、クリックされたことをフラグとしてグローバル変数に残します。 その変数はクリックする毎に、例えば０と１に切り換えます。 最初が０だとしたら、クリックで固定すると１ですね。 １ならマウスオーバーとマウスアウトの処理を無視すれば良いのです。
お礼
回答ありがとうございます。 なるほど。とは思うのですが、 さて実装となると 具体的には どうしたらいいんでしょうか？ 無視するとは？ 以上 よろしくお願いします。
お礼
回答ありがとうございました。 そのままをサンプル作らせていただきまして、 動きを確認できました。 これがしたかったんです。 ありがとうございました。 これから、 解析して勉強してみます。