www.webdeveloper.com
Results 1 to 5 of 5

Thread: Slideshow on mouseout, image map on mouseover?

  1. #1
    Join Date
    Apr 2011
    Location
    Seattle, WA
    Posts
    265

    Exclamation Slideshow on mouseout, image map on mouseover?

    Ok, so I've got an image-map of an actual map (my client didn't want the Google API on the landing page, so they had me make a counties-only map) -- anyway, one of the counties is "too small" and most users won't notice that it's click-able, so I want to run through the "highlighted" version of all 5 counties that are involved... There is basically a brown map in the background, and when they hover over a county, the "shadow" foreground image that covers just the selectable counties is replaced by an image of that county with a highlight..

    What I want to do, is that when the mouse is NOT over the div with the map, the map should "slideshow" cycle through each of the counties in turn... then when they hover over the map, it goes to the static "all counties" shadow, and then they can hover over a county to have their image-map highlight happen.

    Any suggestions?

  2. #2
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,689
    can you post a link to your current page to help me understand the requirement
    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/

  3. #3
    Join Date
    Apr 2011
    Location
    Seattle, WA
    Posts
    265
    seapac.co (landing page)

  4. #4
    Join Date
    Jun 2009
    Location
    Miami
    Posts
    118
    Try the following

    1. On your individual county images, replace all the event handlers with named function calls. This has several advantages which I won't list for the moment.

    Use onmouseover="highlightCounty(this);" and onmouseout="rotateMapsHighlighting(this);" or names that are descriptive for you.

    2. Put an 'id' attribute on all the 'area' elements. Use id="<countyname>" like id="king"

    3. Initialization call:

    In your pageload javascript, you probably want to call setInterval(rotateRolloverFunc, timeInterval) with the parameters being a function used to rotate through the map highlighting (what you call the slideshow).

    The function named in setInterval, rotateRolloverFunc, will need to set a global variable indicating which map has an active rollover. After each interval, rotateRollover will be called.

    YOu must use

    var myInterval = setInterval(param1, param2);

    for the clearInterval() function

    4. As to the function bodies, I will now describe what is the pseudo-code or JPE (just plain English) rather than valid working code:

    Code:
    var currentRollover;  // might be numeric index for an array of names
    
    function rotateRolloverFunc() {
    
        // array of DOM objects or string names to images (can be global)
    
        // get current Rollover index, undisplay it
    
        // count up 1 to next index (or if over max, reset to zero)
        // now use that index to display next Rollover
    
    }
    
    function highlightCounty(county) {
    
       // clear the interval function call:  clearInterval(myInterval);
    
       // parameter 'county' will be Area object.  Use the id attribute to get then
       // id attribute value and learn which county name got the mouseover
    
       // display imagerollover for that county
    
    }
    
    function rotateMapsHighlighting(county) {
    
       //  use the county parameter [Area object], get the id attribute,
       // and undisplay the rollover
    
       //  call the setInterval function again as above
    }

    I don't promise this works immediately, but it will probably bring you 92% to the finish line.

  5. #5
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,689
    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>
    <link href="http://seapac.co/style.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    /*<![CDATA[*/
    #tst{
    	position:relative;height:260px;width:400px;border:solid red 1px;
    }
    
    #tstSS{
    	position:absolute;z-Index:202;visibility:hidden;left:0px;top:0px;height:260px;width:400px;
    }
    
    #tstSS IMG{
    	position:absolute;left:0px;top:0px;height:260px;width:400px;
    }
    
    /*]]>*/
    </style>
    </head>
    
    <body>
    <div id="imgMapCase">
    <img id="countyMap" src="http://www.seapac.co/img/graphic/county/wa_all.png" usemap="#countyMapImg" alt="" style="width:400px;" onmouseout="zxcFadeSlideShow.Show('tstSS');" onmouseover="zxcFadeSlideShow.Pause('tstSS');" />
    
    <map id="countyMapImg" name="countyMapImg">
    <area shape="poly" class="polyMap" coords="180,166,187,178,206,187,220,187,229,199,250,197,285,209,279,240,280,250,259,250,244,254,206,244,183,225,170,205,160,181,163,164" href="community.php?county=pierce" onMouseOver="if(document.images) document.getElementById('countyMap').src= 'http://www.seapac.co/img/graphic/county/wa_pierce.png';" onMouseOut="if(document.images) document.getElementById('countyMap').src= 'http://www.seapac.co/img/graphic/county/wa_all.png';" />
    <area shape="poly" class="polyMap" coords="200,118,305,119,313,126,307,138,316,142,282,172,293,198,280,208,252,197,233,199,221,194,216,188,201,185,193,178,187,169,187,151,196,141,191,129" href="community.php?county=king" onMouseOver="if(document.images) document.getElementById('countyMap').src= 'http://www.seapac.co/img/graphic/county/wa_king.png';" onMouseOut="if(document.images) document.getElementById('countyMap').src= 'http://www.seapac.co/img/graphic/county/wa_all.png';" />
    <area shape="poly" class="polyMap" coords="199,53,315,53,323,69,322,76,306,88,312,93,306,96,305,109,313,115,201,116,203,93,216,83,203,76" href="community.php?county=snohomish" onMouseOver="if(document.images) document.getElementById('countyMap').src= 'http://www.seapac.co/img/graphic/county/wa_snohomish.png';" onMouseOut="if(document.images) document.getElementById('countyMap').src= 'http://www.seapac.co/img/graphic/county/wa_all.png';" />
    <area shape="poly" class="polyMap" coords="187,12,196,13,197,6,343,6,339,13,348,16,340,27,330,22,316,27,322,53,201,52,189,36,186,26,196,25" href="community.php?county=skagit" onMouseOver="if(document.images) document.getElementById('countyMap').src= 'http://www.seapac.co/img/graphic/county/wa_skagit.png';" onMouseOut="if(document.images) document.getElementById('countyMap').src= 'http://www.seapac.co/img/graphic/county/wa_all.png';" />
    <area shape="poly" class="polyMap" coords="180,33,201,55,206,78,203,98,184,89,178,79,180,69,164,55" href="community.php?county=island" onMouseOver="if(document.images) document.getElementById('countyMap').src= 'http://www.seapac.co/img/graphic/county/wa_island.png';" onMouseOut="if(document.images) document.getElementById('countyMap').src= 'http://www.seapac.co/img/graphic/county/wa_all.png';" />
    </map>
    </div>
    <div id="tstSS" >
     <img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" alt="img" />
     <img src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" alt="img" />
     <img src="http://www.vicsjavascripts.org.uk/StdImages/Three.gif" alt="img" />
     <img src="http://www.vicsjavascripts.org.uk/StdImages/Four.gif" alt="img" />
     <img src="http://www.vicsjavascripts.org.uk/StdImages/Five.gif" alt="img" />
    </div>
    <script type="text/javascript">
    /*<![CDATA[*/
    // Fade Slide Show with optional Captions and Paginate. (19-May-2012)
    // by Vic Phillips - http://www.vicsjavascripts.org.uk/
    
    // Functional Code Size 3.81K.
    
    
    var zxcFadeSlideShow={
    
     init:function(o){
      var id=o.ContainerID,p=document.getElementById(id),a=document.getElementById(o.AnchorID),ary=p.getElementsByTagName('IMG'),ms=o.FadeDuration,ms=typeof(ms)=='number'?ms:1000,hold=o.AutoHold,srt=o.AutoStart,z0=0;
      for (;z0<ary.length;z0++){
       ary[z0].style.position='absolute';
       ary[z0].style.zIndex=z0>0?'0':'1';
       ary[z0].style.left='0px';
       ary[z0].style.top='0px';
       this.opac(ary[z0],z0>0?0:100);
      }
      this[id]={
       p:p,
       id:id,
       a:a,
       ary:ary,
       ms:ms,
       hold:typeof(hold)=='number'?hold:ms*2,
       ud:true,
       src:o.Location,
       cnt:0
      }
      this.addevt(p,'mouseover','Hide',id);
      if (typeof(srt)=='number'){
       this.Auto(id,srt);
      }
     },
    
     Auto:function(id,ms){
      var oop=this,obj=this[id];
      if (obj){
       this.Pause(obj.id);
       obj.to=setTimeout(function(){ oop.fade(obj,obj.ud,true); },ms||100);
      }
     },
    
     Hide:function(id){
      var obj=this[id];
      if (obj){
       obj.p.style.visibility='hidden';
       this.Pause(id);
      }
     },
    
     Show:function(id){
      var obj=this[id];
      if (obj){
       this.Auto(id,obj.hold);
      }
     },
    
     Pause:function(id){
      var obj=this[id];
      if (obj){
       obj.auto=false;
       clearTimeout(obj.to);
      }
     },
    
     GoTo:function(id,nu){
      var obj=this[id];
      if (obj&&obj.ary[nu]&&nu!=obj.cnt){
       this.fade(obj,nu);
      }
     },
    
     fade:function(o,nu,auto){
      var lgth=o.ary.length-1,cnt=typeof(nu)=='number'?nu:o.cnt+(nu?1:-1),cnt=cnt<0?lgth:cnt>lgth?0:cnt,lst=o.ary[o.cnt],p=this.pos(o.a),z0=0;
       o.p.style.visibility='visible';
       o.p.style.left=p[0]+'px';
       o.p.style.top=p[1]+'px';
       this.Pause(o.id);
       for (;z0<=lgth;z0++){
        this.opac(o.ary[z0],o.ary[z0]!=lst?0:100);
       }
       lst.style.zIndex='0';
       o.ary[cnt].style.zIndex='1';
       o.cnt=cnt;
       o.auto=auto===true;
       clearTimeout(o.dly);
       this.animate(o,o.ary[cnt],0,100,new Date(),o.ms,'dly');
     },
    
     animate:function(obj,ob,f,t,srt,mS,to){
      var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
      if (isFinite(now)){
       this.opac(ob,now);
      }
      if (ms<mS){
       obj[to]=setTimeout(function(){ oop.animate(obj,ob,f,t,srt,mS,to); },10);
      }
      else if (obj.auto){
        this.Auto(obj.id,obj.hold);
      }
     },
    
     opac:function(ob,now){
      ob.style.filter='alpha(opacity='+now+')';
      ob.style.opacity=ob.style.MozOpacity=ob.style.WebkitOpacity=ob.style.KhtmlOpacity=now/100-.001;
     },
    
     pos:function(obj){
      var rtn=[0,0];
      while(obj){
       rtn[0]+=obj.offsetLeft;
       rtn[1]+=obj.offsetTop;
       obj=obj.offsetParent;
      }
      return rtn;
     },
    
     addevt:function(o,t,f,p,p1,p2){
      var oop=this;
      if (o.addEventListener){
       o.addEventListener(t,function(e){ return oop[f](p,p1,p2);}, false);
      }
      else if (o.attachEvent){
       o.attachEvent('on'+t,function(e){ return oop[f](p,p1,p2); });
      }
     }
    
    
    }
    
    /*]]>*/
    </script>
    <script type="text/javascript">
    /*<![CDATA[*/
    
    zxcFadeSlideShow.init({
     ContainerID:'tstSS',        // the unique ID name of the content DIV element.                (string)
     AnchorID:'countyMap',       // the unique ID name of the anchor element.                     (string)
     FadeDuration:1000,          //(optional) the fade duration in milli seconds.                 (number, default = 1000)
     AutoHold:1000,              //(optional) the auto rotation 'hold' duration in milli seconds. (number, default = FadeDuration*2)
     AutoStart:1000,             //(optional) the auto rotation 'start' duration in milli seconds.(number, default = no auto rotation 'start')
     AddAutoEvents:1000          //(optional) true = add mouseover Pause and mouseout Auto Rotate.(boolean, default = true)
    })
    /*]]>*/
    </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/

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles