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 6 of 6
  1. #1
    New Coder
    Join Date
    Nov 2007
    Posts
    41
    Thanks
    5
    Thanked 1 Time in 1 Post

    Javascript question

    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/

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,503
    Thanks
    3
    Thanked 500 Times in 487 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">
    <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.getElementById(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>
    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/

  • Users who have thanked vwphillips for this post:

    mathew edison (09-09-2011)

  • #3
    New Coder
    Join Date
    Nov 2007
    Posts
    41
    Thanks
    5
    Thanked 1 Time in 1 Post
    Thanks Vic! I'll go ahead and see if I can figure the rest out! Thanks for the reply

  • #4
    New Coder
    Join Date
    Nov 2007
    Posts
    41
    Thanks
    5
    Thanked 1 Time in 1 Post
    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?
    Last edited by mathew edison; 09-13-2011 at 08:36 AM.

  • #5
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,503
    Thanks
    3
    Thanked 500 Times in 487 Posts
    Code:
     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);
     },
    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/

  • Users who have thanked vwphillips for this post:

    mathew edison (09-14-2011)

  • #6
    New Coder
    Join Date
    Nov 2007
    Posts
    41
    Thanks
    5
    Thanked 1 Time in 1 Post
    You rock Vic, thx!


  •  

    Posting Permissions

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