Help highlighting Image Map

Scott R · 05-31-2012, 06:48 PM

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.

xelawho · 05-31-2012, 07:33 PM

have you looked at sprites?

Scott R · 05-31-2012, 07:51 PM

Quote:

Originally Posted by xelawho

have you looked at sprites?

I don't think sprites will do what im wanting to do.

xelawho · 05-31-2012, 08:48 PM

really? beacause I thought this was pretty cool

vwphillips · 06-01-2012, 10:13 AM

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>