Forum Moderators: open
I recently revised a site that uses one of those semicircular upper-left corner nav designs with buttons emanating around the circle. For whatever reason, the customer likes the design so I'm stuck with it. Previously it was sliced and diced into 50 images in a table, with mouseovers on the navs, I've changed it to a single image with mouseover navs positioned using Javascript. If document.getElementById is not supported the mouseovers just don't work, which is fine.
I have two problems with this: one, onResize is not in the html 4.01 trans. spec so it kicks an error. window.onResize=... apparently doesn't do anything.
Two, with onResize in the body tag, in FireFox the resize doesn't fire until the mouse is released. This leaves the positioned elements hanging wherever they were, and they snap right into the correct position when the mouse is released. Hence, the little man behind the curtain is revealed. :-) In IE, they move with the design perfectly.
any ideas on these two? Relevant CSS, code, and HTML is below.
<body onResize="setMouseOvers();">
....
<div id="main">
<img src="images/main.gif" usemap="#pro" name="mainhd" id="mainhd" width="497" height="314" border="0" alt=""></div>
<div id="home_over"><a href="index.html" onMouseOver="home_ov_img.src='images/home_over.gif';" onMouseOut="home_ov_img.src='images/home.gif';"><img src="images/home.gif" name="home_ov_img" id="home_ov_img" width="59" height="21" border="0" alt=""></a></div>
<div id="stat_over"><a href="statistics.html" onMouseOver="stat_ov_img.src='images/stat_over.gif';" onMouseOut="stat_ov_img.src='images/stat.gif';"><img src="images/stat.gif" name="stat_ov_img" id="stat_ov_img" width="97" height="39" border="0" alt=""></a></div>
[.... for each mouseover image The call below is at the bottom of the page, keeps it out of the body tag and insures everything's loaded.]
<script type="text/javascript"> setMouseOvers(); </script>
<map name="pro">
<area shape="poly" coords="421,37,442,39,453,41,467,47,474,53,
480,60,483,67,481,78,473,87,462,95,447,101,
430,105,411,103,390,100,374,92,365,84,360,
71,362,61,371,52,384,44,401,39,414,37" href="index.html" Alt="">
<area shape="poly" coords="388,109,410,111,423,114,435,121,443,
128,447,135,448,143,446,152,438,161,425,169,
405,175,385,176,368,175,348,170,332,160,325,
145,328,130,340,120,353,114,371,110" href="statistics.html" alt="">
[ ..... for each nav area ]
</map>
</body>
css external:
#main {
width: 95%;
margin: 0 auto 12px auto;
padding: 0;
}
#home_over { position: absolute; left:0; top: 0; width: 63px; height:27px; z-index:500; visibility:hidden; }
#stat_over { position: absolute; left:0; top: 0; width: 97px; height:39px; z-index:700; visibility:hidden; }
[ ... For each mouseover div]
JS external:
function setMouseOvers() {
if (document.getElementById) {
elms = new Array('home_over','stat_over');
y = new Array(63,126);
x = new Array(395,340);
L = parseInt(document.getElementById('main').offsetLeft);
for (i=0;i<elms.length;i++) {
lt = parseInt(L)+ parseInt(x[i]);
tp = y[i];
e = document.getElementById(elms[i]);
e.style.left=lt+'px';
e.style.top=tp+'px';
e.style.visibility='visible';
}
}
else { return false; }
}
Browser scripting pays no heed to the HTML spec. Whether the attribute is in the spec has no bearing on the issue. It's simply that the events are case-sensitive, and are not intercapped (traditional intercapping of inline HTML events has bred this regular error).
window.onresize = function(){alert("resized")}
How about the hovering images? Has anyone got a BETTER idea how to do this using an imagemap? It works pretty well except for the FireFox onresize thing . . . . even then it still works but just that one bit bugs me.
I thought of running a timer that checks position every few milliseconds but that seems like overkill and would slow down the browser.
Also someone may wonder why I didn't just put the "show the layer" bit in a mouseover on the map. When you mouse out of the hovering image, it passes over the map area on the way out and brings in another mouseover event. So by positioning the hovering object and using two images in it, it's an easy fix. Now that I've so greatly reduced the images the page loads in 3 seconds with the cache cleared.
