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:
div boxes:Code:<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>
stylesheet:Code:<div id="info1"><p>Information box goes here</p></div> <div id="info2"><p>Another information box goes here</p></div> and so on...
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.Code:#info1 {visibility:hidden;} #info2 {visibility:hidden;} You get the idea.
Please tell me I've gone code-blind and there's a simple fix?



Reply With Quote

Bookmarks