- 締切済み
IE6でのonMouseover、onMouseoutによる画像切り替え
いつもお世話になっています。 JavaScriptでonMouseover、onMouseoutによる画像の切り替えを行っています。 Internet Explorer 7.0 Internet Explorer 6.0 Opera 10.00 safari 4.0 以上のブラウザーで確認をとっているのですが、Internet Explorer 6.0だけ上手く動きません。 ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーHTML <IMG src="../img/map/1f/map.jpg" width="433" height="469" border="0" name="myIMG1"usemap="#tizu"> <p id="7" onMouseover="Swap('myIMG1', '../img/map/1f/7.jpg'); " onMouseout="Swap('myIMG1', '../img/map/1f/map.jpg');">テスト</p> ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー JavaScript function Swap(iName, img_url){ myobj = document.images[iName]; myobj.src = img_url; } ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー 文字にマウスを持っていくと、地図の画像が変わる。 というのをしたいのです。 どなたか助言をよろしくお願いいたします。
- masa_tokai
- お礼率88% (31/35)
- JavaScript
- 回答数3
- ありがとう数4
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- fujillin
- ベストアンサー率61% (1594/2576)
ヨコからの思いつきですが… 表示できないIEだけ、javascriptをオフに設定してあるなんてことはないですか？
- yambejp
- ベストアンサー率51% (3827/7415)
基本的な考え方は間違ってないと思いますが document.imagesのnameでアクセスするというのはだいぶ古いイメージが・・・ またpにマウスオーバーするより明確にトリガーをイメージしやすい アンカーをつかう方がユーザービリティーは高いと思います。 ちなみにidに「数字だけ」とかはNGです。 ざっくりこんな感じでどうでしょう？ <script> function Swap(iID, img_url){ var myobj = document.getElementById(iID); myobj.src = img_url; return false; } </script> <IMG src="1.jpg" id="myIMG1"> <a href="#" onMouseover="return Swap('myIMG1', '1.jpg'); " onMouseout="return Swap('myIMG1', '2.jpg');">テスト</a>
お礼
html <a href="#" onMouseover="return Swap('myIMG1', '../img/map/1f/7.jpg'); " onMouseout="return Swap('myIMG1', '../img/map/1f/map.jpg');">テスト</a> javascritp function Swap(iID, img_url){ var myobj = document.getElementById(iID); myobj.src = img_url; return false; 教えていただいたソースを使って、試してみたのですが動きません。 もしかしたら、ソースではないところがおかしいのでしょうか？ IE6だけ表示できないと言うのは他に原因があるのでしょうか？
- OKbokuzyo
- ベストアンサー率43% (130/296)
質問ソースをコピペして動かしましたが IE6(SP2)で問題なく動きましたよ？ 質問ソース以外のところに問題があるのでは？ 上手く動かないというのはJavaScriptエラーが出ているのですか？ IEで詳細を見ればだいたいどの位置にどのようなエラーが出ているのかわかりますよ。
お礼
早々のお返事ありがとうございます。 以下にソースをコピペしました。 html------------------------------------------------------------ <html xmlns="http://www.w3.org/1999/xhtml"> <head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><meta name="robots" content="index, follow" /> <title>TEST</title> <link rel="stylesheet" type="text/css" href="../css/default.css" /> <script type="text/javascript" src="../js/IE7.js"></script><!-- ブラウザー対応 --> <script type="text/javascript" src="../js/lightwindow/prototype.js"></script><!-- Ajax --> <script type="text/javascript" src="../js/lightwindow/effects.js"></script><!-- Ajax --> <script type="text/javascript" src="../js/chengecolor.js"></script><!-- 文字と地図の反転 --> </head> <div id="subContents"> <h3>カテゴリー</h3> <ul class="category"> <div id="accordion2"> <dl class="accordion2" id="slider2"> <dt>1F</dt><dd> <p id="7" onMouseover="Swap('myIMG1', '../img/map/1f/7.jpg'); " onMouseout="Swap('myIMG1', '../img/map/1f/map.jpg');"><a href="http://www.rubyonrails.com/" class="lightwindow page-options" params="lightwindow_width=900,lightwindow_height=900" title="店舗">UN<a></p> </dd></dl></div></div> <div id="mapimg"> <!-- 地図--> <IMG src="../img/map/1f/map.jpg" width="433" height="469" border="0" name="myIMG1"usemap="#tizu"> </div> </body> </html> JavaScript------------------------------------------------------ //テーブルから地図にアクセス function Swap(iName, img_url){ myobj = document.images[iName]; myobj.src = img_url; } 未熟もで申し訳ありません。よろしくお願いいたします。
関連するQ&A
- onMouseoverについて教えてください。
前回は、onMouseoverで文字にマウスを合わせると関連するimgが変わる。 というもを作りました。 皆様の助言やご指摘のおかげで完成致しました。 本当にありがとうございます。 今回は追加機能として、マウスを対象文字に合わせている間、関連するimgが点灯するというのを作りたいのです。 ----------html------------------------- <div id="mapimg"> <!-- 地図--> <IMG id="myIMG1" src="../img/map/1f/map.jpg" width="433" height="469" border="0"> </div> <a href="○○○" id="7map" onMouseover="return setInterval(Swap('myIMG1', '../img/map/1f/7map.jpg'),200);" onMouseout="return Swap('myIMG1', '../img/map/1f/map.jpg');" title="test">TEST</a><br> ----------javascript-------------------- function Swap(iID, img_url){ var myobj = document.getElementById(iID); if(myobj.src == img_url){ myobj.src = "../img/map/1f/map.jpg"; }else{ myobj.src = img_url; } return false; } 素人なりに考えて、「setInterval」を使って、一定の間隔で関数を呼び出し、元のimgと表示（点灯）imgを繰り返し表示すればいいと思ったのですが、上手く行きません。 どなたか助言をお願いいたします。 未熟者でソースが汚いのですが、お願いいたします。
- ベストアンサー
- JavaScript
- changeImgによる画像の入れ替え時のIEにおける不安定さ
changeImgで画像を入れ替えたいのですが、 FireFoxでは問題ないのですが、 IEだと、画像が表示されない、半分だけ表示される、等の現象が発生してしまいます。 表示されないときに右クリックの画像を表示するにすると表示されます。 http://inoue.sub.jp/test/ ソースは ************************** function changeImg(iName,img){ document.images[iName].src=img; } ************************** <img height="344" border="0" width="230" name="tar01" id="tar01" alt="" src="img/01.jpg"/> <a onclick="changeImg('tar01','img/01.jpg');" onmouseout="changeImg('tar02','img/07.jpg')" onmouseover="changeImg('tar02','img/08.jpg');" href="javascript:void(0);"> <img height="83" border="0" width="50" name="tar02" id="tar02" alt="" src="img/07.jpg"/></a> <a onclick="changeImg('tar01','img/02.jpg');" onmouseout="changeImg('tar03','img/09.jpg')" onmouseover="changeImg('tar03','img/10.jpg');" href="javascript:void(0);"> <img height="83" border="0" width="50" name="tar03" id="tar03" alt="" src="img/09.jpg" class="pl5"/></a> になります。 何処がおかしいのでしょうか？どうぞよろしくお願いいたします。
- 締切済み
- JavaScript
- 複数画像にクリッカブルマップ
当方、HTML・CSSは少しだけ分かりますが、javascriptの知識がありません。 添付の画像のように、 ひとつのHTML内に複数の画像を置き、それぞれの中に複数のクリッカブルマップ（ロールオーバーも可能） を設置したいのですがうまく動きません。。 ■javascript （動かず） if(navigator.appVersion.charAt(0) >=3){ var rolimg = new Array(); for( i = 0 ; i < 10 ; i++ ){ rolimg[i] = new Image(); } rolimg[0].src= "img/0.jpg" rolimg[1].src= "img/1.jpg" rolimg[2].src= "img/2.jpg" rolimg[3].src= "img/3.jpg" rolimg[4].src= "img/4.jpg" rolimg[5].src= "img/5.jpg" } function paintRol(dim,cnt){ if(navigator.appVersion.charAt(0) >= 3 ){ document.images[dim].src=rolimg[cnt].src; } } ■HTML <!--ひとつめの画像--> <img src="img/0.jpg" usemap="#map" name="rollover" /> map name="map" id="map"> <area shape="poly" coords="***,***,***,***,***,***,***,***,***,***,***,***" href="#" onMouseOver="paintRol('rollover',1)" onMouseOut="paintRol('rollover',0)" /> <area shape="poly" coords="***,***,***,***,***,***,***,***,***,***,***,***" href="#" onMouseOver="paintRol('rollover',2)" onMouseOut="paintRol('rollover',0)" /> <area shape="poly" coords="***,***,***,***,***,***,***,***,***,***,***,***" href="#" onMouseOver="paintRol('rollover',3)" onMouseOut="paintRol('rollover',0)" /> </map> <!--ふたつめの画像--> <img src="img/4.jpg" usemap="#map" name="rollover" /> map name="map" id="map"> <area shape="poly" coords="***,***,***,***,***,***,***,***,***,***,***,***" href="#" onMouseOver="paintRol('rollover',5)" onMouseOut="paintRol('rollover',0)" /> </map> ------ よろしくお願いします。
- 締切済み
- JavaScript
- onmouseoverとoutで画像を切り替えられた・・・けど、何だろう青い枠線；
お世話になります。 ビルダー１１で作成中です。 onmouseover時とonmouseout時に画像を入れ替える処理を入れました。 参考サイトさんを利用して、以下のようなソースです。 <img src="画像.jpg" alt="がぞう" onmouseover="this .src=画像２.jpg';" onmouseout="this .src='画像.jpg';"> でも、上記ソースだと、プレビュー画面で画像の回りに青い枠線が 常時表示されるようになってしまいました（！） ビルダー内蔵のJavaScriptで_HpbImgSwap関数があって、 それを利用していたときはそんなことにはならなかったのですが・・・。 ちなみに、「じゃあ、そっち使えばいいじゃん」とおっしゃる意見も 出ると思うのですが、そちらを利用すると、なんかONMOUSEのときに、 画像が凹む？のです。 それはちょっと都合が悪い、ということで、上記ソースでできるならば、と思いました。 青い枠線を非表示にするには、どうしたらよいでしょうか？ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ よろしくご教示ください。<(_ _)>
- ベストアンサー
- HTML
- onMouseOverで変える位置
お世話になります。 長文失礼します。 <html> <head> <title>ページのタイトル名</title> <SCRIPT LANGUAGE="JavaScript"> <!-- movimg=new Array() movimg[0] = new Image();movimg[0].src='img/img-01-206.jpg'; movimg[1] = new Image();movimg[1].src='img/img-01-208.jpg'; movimg[2] = new Image();movimg[2].src='img/img-01-213.jpg'; function changImg1(imgNoA,imgNoB) { document.images[imgNoA].src=movimg[imgNoB].src; }; <!----> </SCRIPT> </head> <body> <img src="img/img-01-01.jpg" width="300" height="225">--(1) <img src="img/img-01-208.jpg" width="300" height="225">--(2) <BR> <a href="javascript:function voi(){};voi()" onMouseOver="changImg1(0,0);"> <IMG src="img/img-01-206.jpg" border="0"></a> <a href="javascript:function voi(){};voi()" onMouseOver="changImg1(0,1);"> <img src="img/img-01-208.jpg" border="0"></a> <A href="javascript:function voi(){};voi()" onMouseOver="changImg1(0,2);"> <IMG src="img/img-01-213.jpg" border="0"></A> </body> </html> という風にonMouseOverで画像を変えているようにしているのですが、 この場合(1)の画像がかわりますよね。 これで(2)の画像を変えるようにするにはどうすればいいでしょうか？ 参考になるHPなどでも構いませんのでよろしくお願いします。
- ベストアンサー
- JavaScript
- ランダム画像＆マウスオーバーで画像切り替え
こんばんは。 下記内容を外部JSファイルにしたいのですがやり方がいまいちわかりません。 <script language="javascript"> <!-- //ランダムにgazouを表示 img = new Array(); img[0] = "gazou1.jpg"; img[1] = "gazou2.jpg"; img[2] = "gazou3.jpg"; img[3] = "gazou4.jpg"; img[4] = "gazou5.jpg"; img[5] = "gazou6.jpg"; n = Math.floor(Math.random()*3); m = n+3; document.write("<img src='"+img[n]+"' border='0' onmouseover=src='"+img[m]+"' onmouseout=src='"+img[n]+"'>"); //--> </script> どなたかご教授頂けると助かります。 よろしくおねがいいたします。
- ベストアンサー
- JavaScript
- onmouseoverとoutで画像を切り替えられた・・・けど、何だろうこのちっちゃい下線；
何度もお世話になります。； ビルダー１１で作成中です。 画像のリンクの青い枠線は無事に消えたのですが、 <A href="○○○.html"> <img src="■■■.jpg" alt="ほにゃらら" onmouseover="src='■■■2.jpg';" onmouseout="src='■■■.jpg';"> </A> 上記ソースだけなのですが、プレビューで見ると、 画像の右下に小さなリンク下線？のようなものが出現するように なりました。TT これはどうやったら消すことができますでしょうか。 申し訳ありませんが、よろしくご教示下さい。><
- 締切済み
- HTML
- JavaScript - 月ごとに画像変化
<script type="text/javascript"> <!-- var myimg = new Array(); myimg[0] = '<img src="a.jpg" alt="a.jpg" width="477" height="33">'; myimg[1] = '<img src="b.jpg" alt="b.jpg" width="477" height="33">'; myimg[2] = '<img src="c.jpg" alt="c.jpg" width="477" height="33">'; myimg[3] = '<img src="d.jpg" alt="d.jpg" width="477" height="33">'; myimg[4] = '<img src="e.jpg" alt="e.jpg" width="477" height="33">'; myimg[5] = '<img src="f.jpg" alt="f.jpg" width="477" height="33">'; myimg[6] = '<img src="g.jpg" alt="g.jpg" width="477" height="33">'; myimg[7] = '<img src="h.gif" alt="h.jpg" width="477" height="33">'; myimg[8] = '<img src="i.jpg" alt="i.jpg" width="477" height="33">'; myimg[9] = '<img src="j.jpg" alt="j.jpg" width="477" height="33">'; myimg[10] = '<img src="k.jpg" alt="k.jpg" width="477" height="33">'; myimg[11] = '<img src="l.jpg" alt="l.jpg" width="477" height="33">'; var mynow = new Date(); var mymonth = mynow.getMonth(); document.write("<center><img 'src="+myimg[mymonth ]+"'></center>"); // --></script> このようなものをHTML属性のBODY内に入れて、月ごとに画像を変化させるということを実現しています。 画像の変化自体はうまくいってますが、ブラウザの多くは [a.jpg]'> （"["と"]"は画像の端）という風に、右端に文字が出てしまいます。 試しに、2つの"'"を消せば []> という風に、画像が見つからない×印がついて表示も出来ません。 文字が出ないようにするにはどう対応するのでしょうか。 詳しい方アドバイスお願いします。 ちなみにJavascriptにこだわらず、月ごとに画像が変化できれば何でもいいです。
- ベストアンサー
- JavaScript
- javascript画像の切り替えについて
javascriptでの画像切り替えについて、どなたか教えていただけますでしょうか？ やりたいことは、ユニクロの商品ページのカラー選択のような、↓↓ http://store.uniqlo.com/jp/CSaGoods/472513 サムネイルにマウスオーバーするとメイン画像が切り替わり、 マウスアウトすると、一番最初の画像に戻り、 クリックすると、選択した画像が固定されてメイン画像に表示される、 という動きです。 実際に下のようなソースを作ったのですが、 マウスオーバーとマウスアウトはきちんと動作しても、 クリックしたときに画像が固定されなくて困っています。 どなたか教えて頂けませんでしょうか？ よろしくお願いいたします。 ------------------------------------------- <div id="item_main"> <img src="メイン画像のURL" alt="" name="main" /></div> <div id="item_sum"> <p> <img src="サムネイルのURL1" width="24" height="24" onMouseOver="document.main.src='メイン部分に表示させたい画像のURL1;" onMouseOut="document.main.src='メイン画像のURL';" onClick="document.main.src='メイン部分に表示させたい画像のURL1';" /> <img src="サムネイルのURL2" width="24" height="24" onMouseOver="document.main.src='メイン部分に表示させたい画像のURL2;" onMouseOut="document.main.src='メイン画像のURL';" onClick="document.main.src='メイン部分に表示させたい画像のURL1';" /> <img src="サムネイルのURL3" width="24" height="24" onMouseOver="document.main.src='メイン部分に表示させたい画像のURL3;" onMouseOut="document.main.src='メイン画像のURL';" onClick="document.main.src='メイン部分に表示させたい画像のURL1';" /> </p> </div> </div> ----------------------------------------------------
- 締切済み
- JavaScript
- 画像の切り替え
教えてください。 画像がはじめに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> 以上 よろしくお願いします。
- ベストアンサー
- JavaScript
お礼
皆さん。 ありがとうございました。 解決しました。根本的なことは解決していませんが、 IE6を一度アンインストールして、再インストールしなおしてHTMLをみたところ、ソースが反映していました。 IE6をインストールしたときの不具合かと思います。 皆さん。 未熟な私に助言をしていただいてありがとうございます。