- 締切済み
IE６だと動かない マウスオーバーで画像の入れ替え
以下のように書いてみました。 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)
こんな感じでどうでしょう。 しかし、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>
- lilillllililili
- ベストアンサー率71% (23/32)
先ほどの回答ではなくこちらを利用すれば、デフォルトの画像を２回も指定しなくて済みます。 <img src="top.jpg" onMouseOver="z=this.src;this.src='hover.jpg';" onMouseOut="this.src=z;">
- lilillllililili
- ベストアンサー率71% (23/32)
IE6の場合、:hoverセレクタは使用できなかった気がします。 そのため全ブラウザで対応するにはJavaScriptを使用するべきでしょう。 簡単な方法としましては、次のようなものがあります。 <img src="top.jpg" onMouseOver="this.src='hover.jpg';" onMouseOut="this.src='top.jpg';"> ２ヶ所ある「top.jpg」にはデフォルトの画像を、 「hover.jpg」にはマウスが乗っている時の画像を指定してください。 IE6の環境が無いためテストはしていません。
補足
lilillllilililiさん、ご回答有難うございます。 IE6でもaに対してはhoverが効くと思ってまして。 で、やりたい事はmouseoverで画像を変えたいのではなく、、 やりたい事は以下の様な感じです。（示したサンプルはもう少し簡易） http://css-eblog.com/eblog_sample/0901/css-remote-rollover/ 上記URLのサンプルだとIE6でも問題無く動作してました。 いったい何が秘訣なのかと。。
お礼
lilillllilililiさん、ご回答有難うございます。 事故解決しました。最初の質問に示したソースに下記を追加でIE6でもOKになりました。 #itmImg ul li a:hover { position: static; }