オンマウスオーバーで画像を表示

質問

画像にマウスを重ねると、別の画像を表示させるようにしたいと考えています。別窓をオープンさせると、うっかりオンマウスになったときウザイので、別窓ではなくそのページ上に重なるように現れる…というのは可能でしょうか。できれば浮き出る感じにしたいのです。どなたか教えてください(;_;)

回答No.1

cyokokichi · ベストアンサー

document.getElementById("img").setAttribute('src','http://url.gif);
これでid属性値にimgを持つimg要素のsrc属性値を変更できます。

for(i=0;i<= 100;i++){
document.getElementById("img").style.filter = "alpha(opacity="+i+",style=0)"
}
これでIE6では徐々に画像が現れるように見えます。

これにpositionのスタイルを加えてみてはいかがでしょうか？

1つのimg要素で操作するなら
フィルター100→オンマウス→フィルター0→src変更→フィルター→100→マウスアウト→フィルター0→src変更→フィルター→100→先頭へ
こんなことを繰り返せば良いのではないでしょうか。

100>フィルター>0のときのマウスアウトの処理を忘れずに！！

画像を最初に隠しておくならpositionのスタイル+フィルター0開始にするとよいように思えます。

これはIE6では動きました。

回答No.2

m035

<img src="imgA.jpg" onmouseover="this.src='imgB.jpg'" onmouseout="this.src='imgA.jpg'">
と書けば画像をマウスが乗ったときだけ切り替えることが可能です。
浮き上がるとか高度なことは出来ませんが、ほぼすべてのブラウザで動作すると思います。