- 締切済み
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; } 未熟もで申し訳ありません。よろしくお願いいたします。
お礼
皆さん。 ありがとうございました。 解決しました。根本的なことは解決していませんが、 IE6を一度アンインストールして、再インストールしなおしてHTMLをみたところ、ソースが反映していました。 IE6をインストールしたときの不具合かと思います。 皆さん。 未熟な私に助言をしていただいてありがとうございます。