Prev: FAQ Topic - How do I make a 10 second delay? (2008-05-05)
Next: IE Scrollbars
From: Eamorr on 4 May 2008 19:13
Hi guys,

You'll see down on the [b]bottom right[/b] 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.

Best regards,

Eamorr
From: Ugo on 5 May 2008 06:14
> Hi guys,
> You'll see down on the [b]bottom right[/b] 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
 | 
Pages: 1
Prev: FAQ Topic - How do I make a 10 second delay? (2008-05-05)
Next: IE Scrollbars