- ベストアンサー
画像の切り替え
教えてください。 画像がはじめに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)
クリックしたときに、クリックされたことをフラグとしてグローバル変数に残します。 その変数はクリックする毎に、例えば０と１に切り換えます。 最初が０だとしたら、クリックで固定すると１ですね。 １ならマウスオーバーとマウスアウトの処理を無視すれば良いのです。
お礼
回答ありがとうございます。 なるほど。とは思うのですが、 さて実装となると 具体的には どうしたらいいんでしょうか？ 無視するとは？ 以上 よろしくお願いします。
関連するQ&A
- htmlファイルによって正常にロールオーバーするページとしないページがあるのですが、どこが間違っているのでしょう？
お世話になります。 すべてのページに共通のボタンを設置してロールオーバーさせたいのですが、なぜかhtmlファイルによってきちんとロールオーバーするページとしないページがあります。初心者なので知らない内にソースをいじってしまったのかもしれませんが、このソースのどこが間違っているか教えていただけないでしょうか？初心者なものでホントに分からないです。ホントに困っています、どうかよろしくお願いします。ちなみにDreamweaverMXを使用しています。 ■正常に働くhtml <body onLoad="MM_preloadImages('images/home02.jpg','images/news02.jpg','images/company02.jpg')"> 中略 <a href="index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','images/home02.jpg',1)"><img src="images/home01.jpg" alt="home" name="Image1" width="134" height="53" border="0"></a> <a href="news.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image2','','images/news02.jpg',1)"><img src="images/news01.jpg" alt="新着情報" name="Image2" width="134" height="53" border="0"></a> <a href="company.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image3','','images/company02.jpg',1)"><img src="images/company01.jpg" alt="会社概要" name="Image3" width="133" height="53" border="0"></a> ■正常に働かないhtml <body onLoad="MM_preloadImages('images/home02.jpg','images/news02.jpg','images/company02.jpg')"> 中略 <a href="index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','images/home02.jpg',1)"><img src="images/home01.jpg" alt="home" name="Image1" width="134" height="53" border="0"></a> <a href="news.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image2','','images/news02.jpg',1)"><img src="images/news01.jpg" alt="新着情報" name="Image2" width="134" height="53" border="0"></a> <a href="company.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image3','','images/company02.jpg',1)"><img src="images/company01.jpg" alt="会社概要" name="Image3" width="133" height="53" border="0"></a>
- ベストアンサー
- HTML
- 二重の画像切り替え
以下のようなJavaScriptを作りたいと考えております。 非常にレベルの低い内容で申し訳ないのですが、どうかみなさんの知恵を貸していただけば幸いです。 （ちなみにJavaScriptで処理品ければいけない成約がありますので、他の方法は今回はすみません。） 見せるのも恥ずかしいレベルのソースですが、ソースも載せます。 ＣのいずれかをクリックするとＢの３つのサムネイル画像がすべて切替り、 更にＢのいずれかをクリックすると拡大画像のＡが切替るJavaScriptを作りたいと考えております。 ┌──┐ │拡大│←Ａ（Ｂの拡大画像） └──┘ ┌─┐┌─┐┌─┐ │前││横││後│←Ｂ（車の各方向からの写真画像） └─┘└─┘└─┘ ┌─┐┌─┐┌─┐ │赤││青││黒│←Ｃ（車のカラーバリエーション） └─┘└─┘└─┘ ◆◆◆現在のソース◆◆◆ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2/jquery.min.js"></script> <!--Ａ（Ｂの拡大画像）--> <div id="main_img"><img id="target_main" src="images/red_head.jpg" width="450" height="190" alt="image"></div> <!--Ｂ（車の各方向からの写真画像）--> <div class="thumbnail"> <ul> <li><a href="images/red_head.jpg"><img id="target_thumbnail_01" src="images/red_head.jpg" width="100" height="41" alt="gold_01"></a></li> <li><a href="images/red_side.jpg"><img id="target_thumbnail_02" src="images/red_side.jpg" width="100" height="41" alt="gold_02"></a></li> <li><a href="images/red_back.jpg"><img id="target_thumbnail_03" src="images/red_back.jpg" width="100" height="41" alt="gold_03"></a></li> </ul> </div> <!--Ｃ（車の各方向からの写真画像）--> <div class="color"> <ul> <li><a href="○○○"><img src="images/wheat.jpg" width="78" height="26" alt="sample01"></a></li> <li><a href="○○○"><img src="images/images/java.jpg" width="78" height="26" alt="sample01"></a></li> <li><a href="○○○"><img src="images/images/graphite.jpg" width="78" height="26" alt="sample01"></a></li> </ul> </div> <!--メインイメージ切り替えスクリプト--> <script type="text/javascript"> $(document).ready( function() { $(".thumbnail a").click( function() { var changeSrc = $(this).attr("href"); $("#target_main").fadeOut("slow", function() { $(this).attr("src", changeSrc); $(this).fadeIn(); } ); return false; }); }); </script> <!--カラー切り替えスクリプト--> ・ ・ ・
- 締切済み
- JavaScript
- このCSSどこが間違ってる？中央揃えで二段組みみするには？
お世話になります。 CSS初心者なのでもしかしたら基本的な質問をしているかもしれませんがどうかお許しください。 現在、中央揃えコンテンツのサイトを作ろうとしているのですが、各コンテンツをdiv分けして内容部分となるコンテンツ（leftmenu/centermenu）を二段組みにしたいと思っています。ところが何故かcentermenuがleftmenuの下に表示されてしまいます。これがCSSのどこがおかしいのでしょう？一応本を読みながら書いたのですが、おかしいところがあったらどうか教えてください。 div#header{width:800px; margin-left:auto; margin-right:auto; } div#container{width:800px; margin-left:auto; margin-right:auto; } div#contens{width:800px; margin-left:auto; margin-right:auto; div#leftmenu{width:157px; float:left; margin-left:auto; margin-right:auto; background-color:#FFFFFF} div#centermenu{width:643px; float:right; margin-left:auto; margin-right:auto; background-color:#FFFFFF} } div#footer{width:800px; margin-left:auto; margin-right:auto; clear:both; } body{background-attachment: scroll; background-color: #990000; background-image: url(bg-photo.jpg); background-repeat: repeat-y; background-position: center; } ＨＴＭＬものせておきます。 </head> <body onLoad="仮.jpg')"> <div id="header"> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="800" height="133"> <param name="movie" value="top.swf"> <param name="quality" value="high"> <embed src="toonie-top.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="800" height="133"></embed> </object> </div> <div id="container"> <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','home02.jpg',1)"><img src="home01.jpg" name="Image1" width="134" height="53" border="0"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image2','','news02.jpg',1)"><img src="news01.jpg" name="Image2" width="134" height="53" border="0"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image3','','company02.jpg',1)"><img src="company01.jpg" name="Image3" width="133" height="53" border="0"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image5','','work02.jpg',1)"><img src="work01.jpg" name="Image5" width="133" height="53" border="0"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image6','','result02.jpg',1)"><img src="result01.jpg" name="Image6" width="133" height="53" border="0"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image4','','contact02.jpg',1)"><img src="contact01.jpg" name="Image4" width="133" height="53" border="0"></a> </div> <div id="contens"> <div id="leftmenu"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image7','','vuk109-bottom2.jpg',1)"><img src="vuk109-bottom.jpg" name="Image7" width="157" height="69" border="0"></a><br> <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image9','','blog2.jpg',1)"><img src="blog.jpg" name="Image9" width="157" height="69" border="0"></a><br> <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image8','','link2.jpg',1)"><img src="link.jpg" name="Image8" width="157" height="69" border="0"></a></div> <div id="centermenu"> <div align="left"><img src="index-bar.jpg"></div> </div> </div> <div id="footer"> <div align="center"> <p><img src="line.gif" width="800" height="5"><br>Copyright (C) 2007 株式会社未定. All Rights Reserved.</p> </div> </body> </html>
- ベストアンサー
- ブログ
- HTML CSS 表示画像のサイズ
表示画像のサイズについて。元の画像サイズはばらばらです。 初歩的な質問ですがよろしくお願いします。 <tr> <td><img src="images/A.jpg" width="100" height="100" border="2"></td> <td>コメント</td> </tr> <tr> <td><img src="images/B.jpg" width="100" height="100" border="2"></td> <td>コメント</td> </tr> <tr> <td><img src="images/C焼.jpg" width="100" height="100" border="2"></td> <td>コメント</td> </tr> これをCSSで書く場合なのですが、 img{ width：100 height：100 border：2 } としたのですが、うまくいきません。なぜでしょうか？
- ベストアンサー
- HTML
- "戻る" と "ロールオーバー"
前のページへ戻るボタンをつくりました。 ロールオーバーはできますが、前のページへ戻れません。 どこが悪いのかわかる方、回答お願いします。 <a href="javascript:history.back()" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('navi11','','images/form/1101.gif',1)"><img src="images/form/11.gif" alt="前のページへ戻ります。" name="navi11" width="190" height="26" border="0"></a>
- ベストアンサー
- その他（インターネット・Webサービス）
- ボタンについて
以下のソースで、 マウスがボタンの上のある時、 ボタンがoffからonに変わりますが、マウスが離れた時には元にoffに戻ってしまいます。 これを、ほかのボタンを押す前までには、ずっとonの状態にするにはどうすればいいでしょうか？ <a href="news.php" target="FrameMain" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image-lesson','','images/button_on.png',1)"> <img src="images/button_off.png" name="Image-lesson" width="141" height="32" border="0"> </a> よろしくお願い致します。
- 締切済み
- JavaScript
- ロールオーバー画像の上にテキストを置く方法
サイトのヘッダのメニューは現在ロールオーバーで表現しています。その画像上にテキストを置きたいのですが、記述方法がわかりません。ぜひ、ご教授ください。。 ----------- <td> <a href="javascript:main_location('http://アドレス);" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('mn_01','','/images/mn_01o.gif','mn_01txt','','/images/mn_01txto.gif',1)"><img src="/images/mn_01.gif" width="150" height="24" alt="main" border="0" name="mn_01"></a> </td> --------- 上記が対象部分のhtmlです。この中にどうやってテキストを記述していいのでしょうか？ よろしくお願いします。
- ベストアンサー
- JavaScript
- うまくリンク先に飛ばないです…
<a href="ch_01/info.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image7','','images/nav_overbtn03.gif',1)"><img src="images/nav_btn03.gif" name="Image7" width="175" height="25" border="0" id="Image7" /></a> こう記述していますが、リンク先に飛ばなくて困っています。 初歩的な質問かと思いますが、どう記述すればいいのでしょうか？ HTML Javaとも初心者なので分かりやすく教えてもらえたら嬉しいです。
- ベストアンサー
- ホームページ作成ソフト
- 画像の切り替えボタンについて教えてください
サムネイルをクリックするごとに、拡大画像がそれらの下に表示されるページを作っています。 拡大された画像をクリックすると、再びサムネイルだけの状態に戻ります。 そこで質問なのですが、拡大された状態の時に、次の画像に進むボタンと戻るボタンを表示させ、実際に切り替えることができ、 サムネイルだけの状態の時にはボタンが表示されないといったものを作る場合、どういった様にすればいいのでしょうか。 いろいろ試してはみたのですが、当方初心者ですのでなかなか動いてくれません。 以下は進む、戻るボタン無しのソースです。 ---------------------javascript------------------------ // resizeImg() function resizeImg(imgId,width,height) { var objStr,obj; if(document.images) { objStr = 'document.' + imgId; obj = eval(objStr); obj.width = width; obj.height = height; } } // imageSwap() function imageSwap(daImage, daSrc) { var objStr,obj; if(document.images) { if (typeof(daImage) == 'string') { objStr = 'document.' + daImage; obj = eval(objStr); obj.src = daSrc; } else if ((typeof(daImage) == 'object') && daImage && daImage.src) { daImage.src = daSrc; } } } ------------------------html--------------------------- <a href="#" onclick="resizeImg('test1',300,300); imageSwap('test1','image/test1.jpg')"> <img src="image/th-test1.jpg" alt="" width="50" height="50" /></a> <a href="#" onclick="resizeImg('test1',300,300); imageSwap('test1','image/test2.jpg')"> <img src="image/th-test2.jpg" alt="" width="50" height="50" /></a> <a href="#" onclick="resizeImg('test1',300,300); imageSwap('test1','image/test3.jpg')"> <img src="image/th-test3.jpg" alt="" width="50" height="50" /></a><br /> <a href="#" onclick="resizeImg('test1',1,1); imageSwap('test1','image/kuuhaku.gif');"> <img name="test1" src="image/kuuhaku.gif" alt="" width="1" height="1" /></a> ---------------------------------------------------- よろしくお願いします。
- ベストアンサー
- JavaScript
- ボタンをMouseOverで、ボタン画像と指定先画像を同時に変えたい
どちらか片方ならできるのですが、本当に同時にできるのかも分かりません。 スクリプトの記述が違うのだと思うのですが。 他の方法でも構いません、ご教授お願いします。 指定画像（name:a1）にmain01.jpgを表示させるスクリプト <script Language="JavaScript"> <!-- if(document.images){ b2 = new Image(); b2.src="main01.jpg"; } else{ b2 = "" document.a1 = "" } //--> </script> <script language="JavaScript"> <!-- function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } ～中略～ ここはDreamweaverで作られたスクリプトなので間違いないと思います。 ボタンのロールオーバーイメージのスクリプトです。 //--> </script> HTML記述 <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('menu00','','menu01.gif',1) document.a1.src='main01.jpg'"><img name="menu00" border="0" src="menu00.gif" width="173" height="32"></a>
- ベストアンサー
- JavaScript
お礼
回答ありがとうございました。 そのままをサンプル作らせていただきまして、 動きを確認できました。 これがしたかったんです。 ありがとうございました。 これから、 解析して勉強してみます。