marynorn
10-10-2008, 02:54 PM
I have a large image, which is divided into a lot of little maps. I've set a javascript behaviour which makes various div boxes visible on mouseover and hidden on mouseout. And it works perfectly... on everything except Firefox.
Why? I'm not used to Firefox doing this to me.
Image:
<img src="images/3d_home.jpg" width="500" height="337" border="0" usemap="#demo3" />
<map name="demo3" id="demo3">
<area shape="poly" coords="319,139,297,162,367,194,383,162" onmouseover='document.getElementById("info1").style.visibility="visible";' onmouseout='document.getElementById("info1").style.visibility="hidden";' />
<area shape="poly" coords="391,163,368,205,451,239,463,193" onmouseover='document.getElementById("info2").style.visibility="visible";' onmouseout='document.getElementById("info2").style.visibility="hidden";' />
<area shape="poly" coords="382,214,356,220,364,237,376,235" onmouseover='document.getElementById("info1").style.visibility="visible";' onmouseout='document.getElementById("info1").style.visibility="hidden";' />
<area shape="poly" coords="240,162,235,184,241,202,249,181" onmouseover='document.getElementById("info4").style.visibility="visible";' onmouseout='document.getElementById("info4").style.visibility="hidden";' />
blah blah blah, more of the same
</map>
div boxes:
<div id="info1"><p>Information box goes here</p></div>
<div id="info2"><p>Another information box goes here</p></div>
and so on...
stylesheet:
#info1 {visibility:hidden;}
#info2 {visibility:hidden;}
You get the idea.
I have a specific way I want this to look, and I've tried three different methods, all of which fail in one browser or another. I'm testing in eight different browsers, and I'm just about ready to go on a kill-crazy rampage.
Please tell me I've gone code-blind and there's a simple fix?
Why? I'm not used to Firefox doing this to me.
Image:
<img src="images/3d_home.jpg" width="500" height="337" border="0" usemap="#demo3" />
<map name="demo3" id="demo3">
<area shape="poly" coords="319,139,297,162,367,194,383,162" onmouseover='document.getElementById("info1").style.visibility="visible";' onmouseout='document.getElementById("info1").style.visibility="hidden";' />
<area shape="poly" coords="391,163,368,205,451,239,463,193" onmouseover='document.getElementById("info2").style.visibility="visible";' onmouseout='document.getElementById("info2").style.visibility="hidden";' />
<area shape="poly" coords="382,214,356,220,364,237,376,235" onmouseover='document.getElementById("info1").style.visibility="visible";' onmouseout='document.getElementById("info1").style.visibility="hidden";' />
<area shape="poly" coords="240,162,235,184,241,202,249,181" onmouseover='document.getElementById("info4").style.visibility="visible";' onmouseout='document.getElementById("info4").style.visibility="hidden";' />
blah blah blah, more of the same
</map>
div boxes:
<div id="info1"><p>Information box goes here</p></div>
<div id="info2"><p>Another information box goes here</p></div>
and so on...
stylesheet:
#info1 {visibility:hidden;}
#info2 {visibility:hidden;}
You get the idea.
I have a specific way I want this to look, and I've tried three different methods, all of which fail in one browser or another. I'm testing in eight different browsers, and I'm just about ready to go on a kill-crazy rampage.
Please tell me I've gone code-blind and there's a simple fix?