...

View Full Version : Javascript question



mathew edison
09-09-2011, 03:21 PM
Hey Guys,

I was creating an image map with rollover images. I was just wondering if I could add a fade effect to the transition. The underarms is the only rollover that works at the moment. Please check the source code for the code because it's too long to post here. http://wedezign.com/chris/

vwphillips
09-09-2011, 07:22 PM
<!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>

mathew edison
09-09-2011, 10:07 PM
Thanks Vic! I'll go ahead and see if I can figure the rest out! Thanks for the reply :thumbsup:

mathew edison
09-12-2011, 10:50 PM
http://wedezign.com/chris/

As you can see I've managed to complete the diagram. There is only one problem: When I go from the abs to the chest for example the two images don't fade as if I'm exiting the entire body but it just switches instantly. Is there any way I could fix this?

vwphillips
09-13-2011, 10:32 AM
over:function(e,p){
var img=this.img;
if (p){
img.style.visibility='visible';
img.src=p;
}
clearTimeout(this.dly);
this.animate(img,p?0:100,p?100:0,new Date(),this.ms);
},

mathew edison
09-14-2011, 02:40 PM
You rock Vic, thx!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum