<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#bodyimg {
position:relative;width:899px;height:478px;
}
#bodyimg IMG {
position:absolute;left:0px;top:0px;width:899px;height:478px;
}
</style>
</head>
<body>
<div id="bodyimg">
<img src="http://wedezign.com/chris/bodydiagram.jpg" usemap="#body" border="0" width="899" height="478" alt="" />
<img src="http://wedezign.com/chris/bodydiagram.jpg" usemap="#body" border="0" width="899" height="478" alt="" />
</div>
<map id="body" name="body">
<area
shape="poly"
coords="138,167,134,178,135,194,134,208,134,222,136,216,142,209,147,196,150,181,145,205,144,216,150,212,155, 199,157,184,154,178,147,176,141,173," href="#" alt=""
title="http://wedezign.com/chris/components/onderarmen.jpg"
onMouseOut="if(document.images) document.getElementById('bodyimg').src= 'http://wedezign.com/chris/bodydiagram.jpg';"
/>
<area
shape="poly"
coords="246,180,243,182,244,189,247,197,252,205,258,219,265,219,262,212,257,207,255,199,253,191,250,186" href="#" alt=""
title="http://wedezign.com/chris/components/onderarmen.jpg"
/>
<area
shape="poly"
coords="260,167,259,174,258,178,258,186,262,194,265,202,267,209,270,217,275,215,272,210,271,203,269,198,269, 193,269,188,267,181,266,177,266,174,266,171" href="#" alt=""
title="http://wedezign.com/chris/components/onderarmen.jpg"
/>
<area
shape="poly"
coords="339,170,338,174,335,180,334,186,333,193,332,201,331,209,332,218,331,225,338,228,344,228,346,224,350, 220,347,219,350,216,350,214,352,210,354,207,355,204,357,199,358,194,359,188,359,183,355,181,352,184, 349,192,347,196,343,196,342,191,341,183,342,180" href="#" alt=""
title="http://wedezign.com/chris/components/onderarmen.jpg"
/>
<area
shape="poly"
coords="450,179,452,189,454,201,457,209,461,219,464,229,469,228,467,222,465,217,463,208,461,199,462,195,459, 191,478,230,477,225,476,217,476,210,476,202,476,194,474,183,472,176,469,188,468,197,471,210,472,220" href="#" alt=""
title="http://wedezign.com/chris/components/onderarmen.jpg"
/>
</map>
http://www.codingforums.com/showthread.php?t=237527
<script type="text/javascript">
/*<![CDATA[*/
// by Vic Phillips (09-September-2001) http://www.vicsjavascripts.org.uk/
function zxcBody(o){
var obj=document.getElementById(o.ImageParentID),imgs=obj.getElementsByTagName('IMG'),map=document.getEl ementById(o.ImageMapID),areas=map.getElementsByTagName('AREA'),ary=[],z0=0,ms=o.EffectDuration;
for (var z0=0;z0<areas.length;z0++){
if (areas[z0].title){
ary[z0]=new Image();
ary[z0].src=areas[z0].title;
this.addevt(areas[z0],'mouseover','over',areas[z0].title);
this.addevt(areas[z0],'mouseout','over',false);
areas[z0].removeAttribute('title');
}
}
imgs[1].style.visibility='hidden';
this.img=imgs[1];
this.ms=typeof(ms)=='number'?ms:1000;
this.now=0;
}
zxcBody.prototype={
over:function(e,p){
var img=this.img;
if (p){
img.style.visibility='visible';
img.src=p;
}
clearTimeout(this.dly);
this.animate(img,this.now,p?100:0,new Date(),this.ms);
},
animate:function(obj,f,t,srt,mS){
var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f,bimg;
if (isFinite(now)){
obj.style.filter='alpha(opacity='+now+')';
obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=now/100-.001;
this.now=now;
}
if (ms<mS){
oop.dly=setTimeout(function(){ oop.animate(obj,f,t,srt,mS); },10);
}
else {
if (t==0){
obj.style.visibility='hidden';
}
}
},
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 zxcBody({
ImageParentID:'bodyimg',
ImageMapID:'body',
EffectDuration:500 //(optional) the fade effect duration in milli seconds. (number, default = 1000)
});
/*]]>*/
</script>
</body>
</html>
