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

締切済

質問者：kingfruits
質問日時：2012/03/23 21:00
回答数：3件

以下のように書いてみました。
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でも動くようにするにはどうしたら良いでしょうか？
ご指導の程、宜しくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

最新から表示
回答順に表示

No.1

回答者： lilillllililili
回答日時：2012/03/23 21:29

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-remot …
上記URLのサンプルだとIE6でも問題無く動作してました。

いったい何が秘訣なのかと。。

補足日時：2012/03/23 22:00

通報する

- 0
- 件

通報する

No.2

回答者： lilillllililili
回答日時：2012/03/23 21:37

先ほどの回答ではなくこちらを利用すれば、デフォルトの画像を２回も指定しなくて済みます。

- 0
- 件

通報する

No.3

回答者： lilillllililili
回答日時：2012/03/24 14:03

こんな感じでどうでしょう。

しかし、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>