javascriptでボックスの表示非表示

質問

javascriptでボックスにマウスオーバーすると、同じ位置に別のボックスを表示させたいと考えています。
以下のようにしてみましたが、ie9ではできたのですが、
ie6、ie7、ie8ではdiv1とdiv2が横に並んでしまいました。

何か解決方法があれば教えてください。
よろしくお願いいたします。

<script type="text/javascript">
window.onload = function() {
div1 = document.getElementById("div1");
div2 = document.getElementById("div2");
div1.onmouseover = function() {
div1.style.display = "none";
div2.style.display = "block";
};
div2.onmouseout = function() {
div1.style.display = "block";
div2.style.display = "none";
};
div1.style.display = "block";
div2.style.display = "none";
};
</script>

<div id="div1" class="box01">
<div id="pic"><img src="image01.gif"></div>
<div id="txt">てきすとてきすと</div>
</div>
<div id="div2" class="box02">
<div id="pic"><img src="image02.gif"></div>
<div id="txt">てきすとてきすと</div>
</div>

回答No.1

tracer · ベストアンサー

試していないので読んだ限りの印象ですが、イベント対象にするDOMに問題がある気がします。
div#1とdiv#2の親要素にmouseoverとmouseoutイベントを設定したほうが確実かと。

<div id="parent">
　<div id="div1">・・・・</div>
　<div id="div2">・・・・</div>
</div>

----
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
var parent = document.getElementById("parent");

parent.mouseover=・・・
parent.mouseout=・・・

お礼

ありがとうございます！教えていただいた方法でできました！