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>