SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Oct 2010
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need a sequantial javascript image swap

    Hello

    I need to swap more than one image on mouseover, I need to pass an array of group of images to a javascript function that will swap these images sequentially, not just one image


    Many Thanks

  2. #2
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function Swap(){
     var args=Swap.arguments,id=args[0],obj=document.getElementById(id),o=Swap[id];
     if (!o&&obj){
      o=Swap[id]={
       id:id,
       obj:obj,
       args:args,
       ms:args[1],
       cnt:1,
       src:obj.src
      }
     }
     if (o){
      o.to=setTimeout(function(){
       o.cnt++;
       if (o.cnt>=o.args.length){
        o.cnt=2;
       }
       obj.src=o.args[o.cnt];
       Swap(id);
      },o.ms);
     }
    }
    
    function Stop(id){
     var o=Swap[id];
     if (o){
      clearTimeout(o.to);
      o.obj.src=o.src;
      o.cnt=1;
     }
    
    }
    /*]]>*/
    </script></head>
    
    <body>
    <img id="img1" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" alt="img" width="100" height="100" onmouseout="Stop('img1');" onmouseover="Swap('img1',1000,'http://www.vicsjavascripts.org.uk/StdImages/Two.gif','http://www.vicsjavascripts.org.uk/StdImages/Three.gif','http://www.vicsjavascripts.org.uk/StdImages/One.gif');" />
     <img id="img2" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" alt="img" width="100" height="100" onmouseout="Stop('img2');" onmouseover="Swap('img2',1000,'http://www.vicsjavascripts.org.uk/StdImages/Two.gif','http://www.vicsjavascripts.org.uk/StdImages/Three.gif','http://www.vicsjavascripts.org.uk/StdImages/Four.gif','http://www.vicsjavascripts.org.uk/StdImages/One.gif');" />
    
    
    </body>
    
    </html>


Bookmarks

Posting Permissions

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