人に聞けない痔の悩み、これでスッキリ >>

教えてください。

画像がはじめに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>

以上
よろしくお願いします。

このQ&Aに関連する最新のQ&A

A 回答 (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>
    • good
    • 0
この回答へのお礼

回答ありがとうございました。

そのままをサンプル作らせていただきまして、
動きを確認できました。
これがしたかったんです。
ありがとうございました。

これから、
解析して勉強してみます。

お礼日時:2010/04/01 20:39

クリックしたときに、クリックされたことをフラグとしてグローバル変数に残します。


その変数はクリックする毎に、例えば0と1に切り換えます。
最初が0だとしたら、クリックで固定すると1ですね。
1ならマウスオーバーとマウスアウトの処理を無視すれば良いのです。
    • good
    • 0
この回答へのお礼

回答ありがとうございます。

なるほど。とは思うのですが、
さて実装となると
具体的には
どうしたらいいんでしょうか?
無視するとは?

以上
よろしくお願いします。

お礼日時:2010/04/01 19:01

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!


人気Q&Aランキング