Hi guys,
You'll see down on the
bottom right of this map I have two roll-
over images (I haven't got round to doing all the other roll-overs
until I get these working!!!)
http://www.xlhi.com/google_groups.php
I keep getting this annoying flicker!!!
I'm completely stuck.
Any advice would be much appreciated.
Ok, I found the problem:
when the mouse goes over the map-area, the comming up of the image invokes
onmouseout event, and so the flicker...
One solution may be the image to have a z-index minor of map
<html><head>
<script type="text/javascript">
function mouseOverArea(county,event,obj)
{
document.getElementById(county+'_img').style.display='block';
event.cancelBubble=true;
}
function mouseOutArea(county,event,obj)
{
document.getElementById(county+'_img').style.display='none';
}
function placeCounty(county,dx,dy)
{
var img_pos_x=document.getElementById('map_bg').offsetLeft;
var img_pos_y=document.getElementById('map_bg').offsetTop;
document.getElementById(county+'_img').style.left= (img_pos_x+dx)+'px';
document.getElementById(county+'_img').style.top= (img_pos_y+dy)+'px';
}
window.onload=function()
{
placeCounty('Wexford',321,384);
}
</script>
<style type="text/css">
img.map_rollover{
position: absolute;
display: none;
z-index: 1;
}
#map_bg
{
position:absolute;
z-index:2;
}
</style>
</head>
<body>
<img id="Wexford_img" src="google_groups.php_files/map_Wexford.png"
class="map_rollover">
<img id="map_bg" src="google_groups.php_files/Ireland.png" usemap="#map"
border="0">
<map name="map">
<area shape="poly"
coords="349,387,355,395,360,396,366,392,368,386,372,383,376,381,385,382,391,385,387,397,387,405,388,412,378,426,374,440,374,449,379,457,376,465,368,465,356,466,346,463,339,460,330,465,328,472,325,464,320,459,319,454,318,445,322,437,325,430,330,425,335,418,338,409,342,402,348,401,349,393"
alt="Wexford" href="
http://www.xlhi.com/orderCab.php?county=Wexford"
onmouseover="mouseOverArea('Wexford',event,this)"
onmouseout="mouseOutArea('Wexford',event,this)">
</map>
</body></html>
P.S.
- Make attention to alpha channel of PNG image, there are problems with
IE<7
- Call placeCounty() function on onload of the page
