Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    May 2012
    Location
    Colorado SPrings
    Posts
    18
    Thanks
    2
    Thanked 3 Times in 3 Posts

    Help highlighting Image Map

    Hey everyone, I have been having a lot of trouble the last day or two trying to figure out how to use JS to highlight my image map while hovering over the specified area. I am doing this for my father and his real estate business on an mls map. I have done everything for the map to work the way I want it to with the image mapping. All I need to do is add a highlight effect on the specified regions when I or a client hover over that area. If any of you have a simple way or just a way at all it would be much appreciated.

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,020
    Thanks
    56
    Thanked 566 Times in 563 Posts

    possibly irrelevant, but...

    have you looked at sprites?

  • #3
    New Coder
    Join Date
    May 2012
    Location
    Colorado SPrings
    Posts
    18
    Thanks
    2
    Thanked 3 Times in 3 Posts
    Quote Originally Posted by xelawho View Post
    have you looked at sprites?
    I don't think sprites will do what im wanting to do.

  • #4
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,020
    Thanks
    56
    Thanked 566 Times in 563 Posts
    really? beacause I thought this was pretty cool

  • #5
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,535
    Thanks
    3
    Thanked 513 Times in 500 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    /*<![CDATA[*/
    .tst {
      position:absolute;left:22px;top:20px;width:351px;height:263px;border:solid black 1px;background-Image:url(http://www.vicsjavascripts.org.uk/StdImages/WinterPalace.jpg);
    }
    
    .tst IMG {
     position:absolute;z-Index:101;width:351px;height:263px;border-Width:0px;
    }
    
    
    /*]]>*/
    </style></head>
    
    <body>
      <div id="tst3" class="tst" >
       <img src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" alt="WinterPalace" usemap="#ImageMap3" ismap="ismap" style="z-Index:101;" />
      </div>
    
     <map name="ImageMap3" id="map3" >
      <area shape="rect" alt="" coords="6,138,73,199"   />
      <area shape="rect" alt="" coords="85,80,173,129" />
      <area shape="poly" alt="" coords="220,147,220,147,203,145,178,158,160,180,185,187,216,190,220,147" />
      <area shape="circle" alt="" coords="235,158,15" />
     </map>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    // Simple Map High Lighting (16-March-2012)
    // by Vic Phillips - http://www.vicsjavascripts.org.uk/
    
    function zxcMapHilight(o){
     var obj=document.getElementById(o.ImageParentID),map=document.getElementById(o.ImageMapID),areas=map.getElementsByTagName('AREA'),ary=o.ImageArray,coords,lft,top,w,h,img,z0=0,z0a;
     for (;z0<areas.length;z0++){
      lft=10000,top=10000,w=0,h=false;
      coords=areas[z0].coords.split(',');
      if (coords.length>3&&coords.length%2==0){
       h=0;
       for (z0a=0;z0a<coords.length;z0a+=2){
        lft=Math.min(lft,coords[z0a]);
        top=Math.min(top,coords[z0a+1]);
        w=Math.max(w,coords[z0a]);
        h=Math.max(h,coords[z0a+1]);
       }
      }
      else if (coords.length==3){
       h=0;
       lft=coords[0]-coords[2]
       top=coords[1]-coords[2]
       w=lft+coords[2]*2;
       h=top+coords[2]*2;
      }
      if (ary&&ary[z0]&&h!==false){
       img=document.createElement('IMG');
       img.src=ary[z0];
       img.style.position='absolute';
       img.style.visibility='hidden';
       img.style.zIndex='1';
       img.style.left=lft+'px';
       img.style.top=top+'px';
       img.style.width=w-lft+'px';
       img.style.height=h-top+'px';
       obj.appendChild(img);
       this.addevt(areas[z0],'mouseover','show',img);
       this.addevt(areas[z0],'mouseout','show',img);
      }
     }
    
    }
    
    zxcMapHilight.prototype={
    
     show:function(e,img){
      img.style.visibility=e.type=='mouseout'?'hidden':'visible';
     },
    
     addevt:function(o,t,f,p){
      var oop=this;
      if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](e,p);}, false);
      else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](e,p); });
     }
    
    }
    
    
    new zxcMapHilight({
      ImageParentID:'tst3',
      ImageMapID:'map3',
      ImageArray:[
       'http://www.vicsjavascripts.org.uk/StdImages/One.gif',
       'http://www.vicsjavascripts.org.uk/StdImages/Two.gif',
       'http://www.vicsjavascripts.org.uk/StdImages/Three.gif',
       'http://www.vicsjavascripts.org.uk/StdImages/Four.gif',
      ]
    });
    /*]]>*/
    </script>
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •