www.webdeveloper.com
Results 1 to 6 of 6

Thread: Changing multiple images on the same page

  1. #1
    Join Date
    Mar 2014
    Posts
    2

    Changing multiple images on the same page

    I am using this script to loop through images on mouseover. How do I make this work for multiple pictures on the same page?


    <script>
    var myImages = [1, 2, 3]
    var img_index = 0;
    var timer;
    var imgId = "myImg";

    // Start animation
    function animate() {
    me = document.getElementById(imgId);

    me.src = "Pictures/" + "test" + myImages[img_index] + ".png"

    img_index++;

    if (img_index == myImages.length){
    img_index = 0;
    }
    timer = setTimeout(animate, 500);

    }

    function stopAnimation() {
    clearTimeout(timer);
    me.src="Pictures/test1.png"
    }
    </script>

    <img class= "format" id="myImg" onmouseover="imgId = this.id; timer = setTimeout(animate, 1000);" onmouseout="stopAnimation();" src="Pictures/test1.png" />

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,356
    Clarification please...

    Do you want to loop through 3 different images when the mouse is held over 1 image?
    or
    Do you want to loop through 3 different images when the mouse is held over any one of the images?
    or
    Do you want several images that loop through 3 different pictures when mouse is held over any one of the several images?

    Can you show a small example of the HTML layout of the placement of the images on a page
    and describe what is to happen when the mouse is lands on any particular element?

    Unclear to me what the final output is to look like.

    BTW: You should enclose your script between [ code] and [ /code] tags (without the spaces)
    to make it easier to read, copy and test your program. It also retains your formatting.
    Also, if the CSS is important, include that as well.

  3. #3
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,669
    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 Animate(i,a,ms){
     if (a){
      var p=i.src.slice(0,i.src.lastIndexOf('/')+1),t=i.src.slice(i.src.lastIndexOf('.'));
      i.n=i.n||0;
      i.n=++i.n%a.length;
      i.s=i.s||i.src;
      i.src=p+a[i.n]+t;
      i.to=setTimeout(function(){ Animate(i,a,ms); },ms||1000);
     }
     else {
      clearTimeout(i.to);
      i.n=0;
      i.src=i.s;
     }
    }
    /*]]>*/
    </script></head>
    
    <body>
    <img src="http://www.vicsjavascripts.org/StdImages/1.gif" alt="image" onmouseover="Animate(this,['1','2','3','4'],1000);" onmouseout="Animate(this);" />
    <img src="http://www.vicsjavascripts.org/StdImages/Egypt5.jpg" alt="image" onmouseover="Animate(this,['Egypt6','Egypt7','Egypt8','Egypt9'],2000);" onmouseout="Animate(this);" />
    </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/

  4. #4
    Join Date
    Mar 2014
    Posts
    2
    Thank you! This work just the way I want it to. If I wanted to start the animation when the page loads, can I do that with this code?

  5. #5
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,356
    I'm amazed 'Vic'!

    How did you figure out that's what the OP wanted from the original post?

    Amazing!

  6. #6
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,669
    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 Animate(i,a,ms){
     if (i&&a&&a instanceof Array){
      var p=i.src.slice(0,i.src.lastIndexOf('/')+1),t=i.src.slice(i.src.lastIndexOf('.'));
      i.n=i.n||0;
      i.n=++i.n%a.length;
      i.s=i.s||i.src;
      i.src=p+a[i.n]+t;
      i.to=setTimeout(function(){ Animate(i,a,ms); },ms||1000);
     }
     else if (i&&i.src){
      clearTimeout(i.to);
      i.n=0;
      i.src=i.s;
     }
    }
    /*]]>*/
    </script></head>
    
    <body>
    <img id="i1" src="http://www.vicsjavascripts.org/StdImages/1.gif" alt="image" onmouseover="Animate(this,['1','2','3','4'],1000);" onmouseout="Animate(this);" />
    <img id="i2" src="http://www.vicsjavascripts.org/StdImages/Egypt5.jpg" alt="image" onmouseover="Animate(this,['Egypt6','Egypt7','Egypt8','Egypt9'],2000);" onmouseout="Animate(this);" />
    
    
    <!-- at the bootom of the page -->
    <script type="text/javascript">
    /*<![CDATA[*/
    
    Animate(document.getElementById('i1'),['1','2','3','4'],1000);
    Animate(document.getElementById('i2'),['Egypt6','Egypt7','Egypt8','Egypt9'],2000);
    /*]]>*/
    </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