Really annoying flickering

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Eamorr
    #1

    Really annoying flickering

    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.

    Best regards,

    Eamorr
    Tags: None
    • Ugo
      #2
      Re: Really annoying flickering

      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(c ounty,event,obj )
      {
      document.getEle mentById(county +'_img').style. display='block' ;
      event.cancelBub ble=true;
      }
      function mouseOutArea(co unty,event,obj)
      {
      document.getEle mentById(county +'_img').style. display='none';
      }
      function placeCounty(cou nty,dx,dy)
      {
      var img_pos_x=docum ent.getElementB yId('map_bg').o ffsetLeft;
      var img_pos_y=docum ent.getElementB yId('map_bg').o ffsetTop;

      document.getEle mentById(county +'_img').style. left= (img_pos_x+dx)+ 'px';
      document.getEle mentById(county +'_img').style. top= (img_pos_y+dy)+ 'px';
      }
      window.onload=f unction()
      {
      placeCounty('We xford',321,384) ;
      }
      </script>
      <style type="text/css">
      img.map_rollove r{
      position: absolute;
      display: none;
      z-index: 1;
      }
      #map_bg
      {
      position:absolu te;
      z-index:2;
      }
      </style>
      </head>
      <body>

      <img id="Wexford_img " src="google_gro ups.php_files/map_Wexford.png "
      class="map_roll over">

      <img id="map_bg" src="google_gro ups.php_files/Ireland.png" usemap="#map"
      border="0">

      <map name="map">
      <area shape="poly"
      coords="349,387 ,355,395,360,39 6,366,392,368,3 86,372,383,376, 381,385,382,391 ,385,387,397,38 7,405,388,412,3 78,426,374,440, 374,449,379,457 ,376,465,368,46 5,356,466,346,4 63,339,460,330, 465,328,472,325 ,464,320,459,31 9,454,318,445,3 22,437,325,430, 330,425,335,418 ,338,409,342,40 2,348,401,349,3 93"
      alt="Wexford" href="http://www.xlhi.com/orderCab.php?co unty=Wexford"
      onmouseover="mo useOverArea('We xford',event,th is)"
      onmouseout="mou seOutArea('Wexf ord',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

        Comment

        Previous template Next
        Working...