締切済み

IE６だと動かない　マウスオーバーで画像の入れ替え

2012/03/23 21:00

以下のように書いてみました。 IE6以外では期待した動作が得られます。 ※imgファイルは適当です。実際に動かす場合は、適当に直して下さい。 <html> <head> <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/> <meta http-equiv='Content-Style-Type' content='text/css'> <style> img{ border: 0px; } #itmImg{ width: 240px; float: left; position: relative; } #itmImg img{ display:block; } #itmImg a span{ display: none; } #itmImg a:hover span{ display:block; position:absolute; top:0; left:0; } #itmImg ul { margin: 0; padding: 0; } #itmImg li{ float:left; list-style:none; } </style> </head> <body> <div id="itmImg"> <img src="hoge1.jpg" width="240" height="240" alt=""> <ul> <li> <a href="javascript:void(0);"> <img src="hoge2.jpg" width="80" height="80" alt=""> <span><img src="hoge2.jpg" width="240" height="240" alt=""></span> </a> </li> <li> <a href="javascript:void(0);"> <img src="hoge3.jpg" width="80" height="80" alt=""> <span><img src="hoge3.jpg" width="240" height="240" alt=""></span> </a> </li> <li> <a href="javascript:void(0);"> <img src="hoge4.jpg" width="80" height="80" alt=""> <span><img src="hoge4.jpg" width="240" height="240" alt=""></span> </a> </li> </ul> </div> </body> </html> IE6でも動くようにするにはどうしたら良いでしょうか？ご指導の程、宜しくお願いいたします。

小林 K太郎（@kingfruits）
お礼率66% (211/319)

CSS
回答数3
ありがとう数1

みんなの回答 （3）
専門家の回答

みんなの回答

lilillllililili
ベストアンサー率71% (23/32)

2012/03/24 14:03 回答No.3

こんな感じでどうでしょう。しかし、jQueryなどを使用したほうが楽にできそうですね。画像のURLやCSS部分の高さ・幅などは後で調節してください。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>mySite</title> <style> #triggers { float: left; } #triggers img { float: left; margin-right: 5px; } #disp { float: left; width: 300px; height: 180px; margin-left: 100px; border: solid 2px #555555; } </style> </head> <body> <div id="triggers"> <img src="img_sample01.png" onMouseOver="change('img_sample2_01.png')" onMouseOut="back()"> <img src="img_sample02.png" onMouseOver="change('img_sample2_02.png')" onMouseOut="back()"> <img src="img_sample03.png" onMouseOver="change('img_sample2_03.png')" onMouseOut="back()"> <img src="img_sample04.png" onMouseOver="change('img_sample2_04.png')" onMouseOut="back()"> <br clear="left"> </div> <div id="disp">ここに画像を表示</div> <br clear="left"> <script type="text/javascript"> var disp = document.getElementById('disp'); var text = disp.innerHTML; function change(tar){ disp.innerHTML = '<img src="'+tar+'">'; } function back(){ disp.innerHTML = text; } </script> </body> </html>

質問者

お礼 2012/03/24 14:31

lilillllilililiさん、ご回答有難うございます。事故解決しました。最初の質問に示したソースに下記を追加でIE6でもOKになりました。 #itmImg ul li a:hover { position: static; }

ログインすると、全ての回答が全文表示されます。

lilillllililili
ベストアンサー率71% (23/32)

2012/03/23 21:37 回答No.2

先ほどの回答ではなくこちらを利用すれば、デフォルトの画像を２回も指定しなくて済みます。 <img src="top.jpg" onMouseOver="z=this.src;this.src='hover.jpg';" onMouseOut="this.src=z;">

ログインすると、全ての回答が全文表示されます。

lilillllililili
ベストアンサー率71% (23/32)

2012/03/23 21:29 回答No.1

IE6の場合、:hoverセレクタは使用できなかった気がします。そのため全ブラウザで対応するにはJavaScriptを使用するべきでしょう。簡単な方法としましては、次のようなものがあります。 <img src="top.jpg" onMouseOver="this.src='hover.jpg';" onMouseOut="this.src='top.jpg';"> ２ヶ所ある「top.jpg」にはデフォルトの画像を、「hover.jpg」にはマウスが乗っている時の画像を指定してください。 IE6の環境が無いためテストはしていません。

質問者

補足 2012/03/23 22:00

lilillllilililiさん、ご回答有難うございます。 IE6でもaに対してはhoverが効くと思ってまして。で、やりたい事はmouseoverで画像を変えたいのではなく、、やりたい事は以下の様な感じです。（示したサンプルはもう少し簡易） http://css-eblog.com/eblog_sample/0901/css-remote-rollover/ 上記URLのサンプルだとIE6でも問題無く動作してました。いったい何が秘訣なのかと。。

ログインすると、全ての回答が全文表示されます。