www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 21

Thread: Change image multiple times

  1. #1
    Join Date
    Apr 2008
    Posts
    11

    Question Change image multiple times

    Hi,

    Basically my query is i want to have multiple image rollovers working so below is the code where i have 3 images but when i click on the image on web it only shows me 2nd picture but doesnt show 3rd picture.

    I want when i do a mouse over on the image it should starts to change again and again until i remove the mouse from the image.

    Below is my some sample code.

    I would be grateful if somebody help me out.



    Code:
    <HTML>
    <HEAD>
    <SCRIPT LANGUAGE="JavaScript">
     
    
      Rollimage = new Array()
    
      Rollimage[0]= new Image(121,153)
      Rollimage[0].src = "car1.jpg"
    
      Rollimage[1] = new Image(121,153)
      Rollimage[1].src = "car2.jpg"
    
      Rollimage[2] = new Image(121,153)
      Rollimage[2].src = "car3.jpg"
    
    
      function SwapOut(){
    for (i=0; i< Rollimage.length; i++)
    {
        document.Rupert.src = Rollimage[i].src;
    }
    	i++;
        return true;
      }
    
      function SwapBack(){
        document.Rupert.src = Rollimage[0].src; 
        return true;
      }
    
    
    </SCRIPT>
    </HEAD>
    
    <BODY>
    <IMG SRC="car1.jpg"
      NAME="Rupert"   
      WIDTH=121  
      HEIGHT=153  
      BORDER=0   onmouseover="SwapOut()"
      onmouseout="SwapBack()">
    </A> 
    </P>
    <p>test</p>
    </BODY>
    </HTML>
    Thanks,
    Regards,

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,355

    Question So many questions ... so little time ...

    Questions:

    1. What are the parameters after the new Image() assignment for?
    If they are to define the width and height, this is not the way to do it.
    You syntax creates an Array with 121x151 elements, which never get assigned!

    2. Why the extra i++ at the end of the 'SwapOut()' function?
    As far as I can see it is not used anywhere.

    Also, try putting a temporary 'alert(msg)' in the loop to make sure
    that the image assignment is correct and that it is not happening
    so fast that you cannot see the change occur.

    3. I don't understand the reference to the 'on click' in the first sentence.
    You only check for 'onMouseOver=' and 'onMouseOut=' to occur, not 'onClick='.

  3. #3
    Join Date
    Mar 2007
    Location
    U.K.
    Posts
    1,127
    Quote Originally Posted by shsh_shah
    Code:
      function SwapOut(){
    for (i=0; i< Rollimage.length; i++)
    {
        document.Rupert.src = Rollimage[i].src;
    }
    You don't have any timing system, so the images are swapped at inifinite speed. MultiSwap
    Where used, return should be executed unconditionally and always as the last statement in the function.

    That's my signature, it's not part of the damn post!

  4. #4
    Join Date
    Apr 2008
    Posts
    11

    Simple Loop to change images

    First of all many thanks but I am kind of confused here...

    As i just want a simple script in which loop running to change image multiple times when mouse is hovered in...

    Thanks,
    Regards,

  5. #5
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,459
    Hi there shsh_shah,

    and a warm welcome to these forums.

    Have a look at this example, you should be able to adapt it to suit your requirements...
    Code:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <base href="http://mysite.orange.co.uk/azygous/images/">
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <style type="text/css">
    #container {
        text-align:center;
        margin-top:50px;
     }
    #myimage {
        width:100px;
        height:100px;
        border:3px double #000;
        cursor:pointer;
     }
    </style>
    
    <script type="text/javascript">
    
       var pics=['anim.gif','anim1.gif','anim2.gif','anim3.gif','anim4.gif','anim5.gif'];
       var count=0;
       var speed=1000; /*this is set for 1 second, edit to suit requirements*/
       var timer;
    
    window.onload=function(){
    document.getElementById('myimage').onmouseover=function() {
       rotateImage(this);
      }
     }
    function rotateImage(obj) {
    
    obj.onmouseout=function() {
       count=0;
       clearTimeout(timer);
       obj.src=pics[0];
       return;
     }
       count++;
    if(count==pics.length) {
       count=0;
     }
       obj.src=pics[count];
       obj1=obj;
       timer=setTimeout('rotateImage(obj1)',speed);
     }
    </script>
    
    </head>
    <body>
    
    <div id="container">
     <img id="myimage" src="anim.gif" alt="">
    </div>
    
    </body>
    </html>
    
    coothead

  6. #6
    Join Date
    Apr 2008
    Posts
    11
    Thanks a million...I have no words to describe how much it helped..

    "Now One more query what if i have many small pictures on the page and when i click any of them it should start changing to multiple images"

  7. #7
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,459
    Hi there shsh_shah,
    I have many small pictures on the page and when I click any of them it should start changing to multiple images
    You will have to give some precise information on that one.
    Here are some basic questions...
    1. Does each small picture have its own selection of image changes or is the selection common to all?
    2. Do you want to stop the rotation once started? If so, by what means?

    ...that will need answering.

    coothead

  8. #8
    Join Date
    Apr 2008
    Posts
    11
    Thanks for quick response Coothead

    1. Each Picture will have its own selection of images
    2. I want to stop the rotation once mouse is removed from any image and if i hover on any image it should be the only one start rotating


    example will be lets say:
    many different designs of dresses on webpage and when u click any small image it starts rotating to different images for that specific design

    Again i am really thankful for your continue help...

  9. #9
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,459
    Hi there shsh_shah,

    Unfortunately, well for you anyway, I am off to play a round of golf now, so I will not be able to look at this problem until this evening.
    Of course, if you are lucky, someone else may solve it for you, in the meantime.

    coothead

  10. #10
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,459
    Hi there shsh_shah,

    I did not go out at my expected time so I had the opportunity to amend the code while waiting.
    Code:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <base href="http://mysite.orange.co.uk/azygous/images/">
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <style type="text/css">
    #container {
        text-align:center;
        margin-top:50px;
     }
    #myimage,#myimage2 {
        width:100px;
        height:100px;
        border:3px double #000;
        cursor:pointer;
     }
    #myimage1 {
        width:200px;
        height:200px;
        border:3px double #000;
        cursor:pointer;
     }
    </style>
    
    <script type="text/javascript">
    
       var pics=['anim.gif','anim1.gif','anim2.gif','anim3.gif','anim4.gif','anim5.gif'];
       var pics1=['ten_quid.jpg','girl.jpg','dog.jpg','blood.jpg','grap.jpg','ball_shad.jpg'];
       var pics2=['buddha.jpg','clouds.jpg','apple.jpg','banana.jpg','aaa.jpg'];
    
       var count=0;
       var speed=1000; /*this is set for 1 second, edit to suit requirements*/
       var timer;
    
    window.onload=function(){
    
    document.getElementById('myimage').onmouseover=function() {
       rotateImage(this,pics);
      }
    document.getElementById('myimage1').onmouseover=function() {
       rotateImage(this,pics1);
      }
    document.getElementById('myimage2').onmouseover=function() {
       rotateImage(this,pics2);
      }
     }
    
    function rotateImage(obj,ary) {
    
    obj.onmouseout=function() {
       count=0;
       clearTimeout(timer);
       obj.src=ary[0];
       return;
     }
       count++;
    if(count==ary.length) {
       count=0;
     }
       obj.src=ary[count];
       obj1=obj;
       ary1=ary
       timer=setTimeout('rotateImage(obj1,ary1)',speed);
     }
    </script>
    
    </head>
    <body>
    
    <div id="container">
     <img id="myimage" src="anim.gif" alt="">
     <img id="myimage1" src="ten_quid.jpg" alt="">
     <img id="myimage2" src="buddha.jpg" alt="">
    </div>
    
    </body>
    </html>
    
    coothead

  11. #11
    Join Date
    Apr 2008
    Posts
    11
    PERFECTTTTTOOOO Thanks a million..It worked...You are a great life saver..
    I will try to understand some of the tags in java script but can u please tell me..
    1. why '#' with container and myimage?
    2. what does that means : onmouseover=function() ?
    3. Can you please small bit tell me what is going on in rotateImage(obj,ary) function?

    Thanks again

  12. #12
    Join Date
    Mar 2007
    Location
    U.K.
    Posts
    1,127
    Quote Originally Posted by shsh_shah
    First of all many thanks but I am kind of confused here...

    As i just want a simple script in which loop running to change image multiple times when mouse is hovered in...

    Thanks,
    Regards,
    Just for the record, does this make it any clearer? MultiSwapClick (Even though it's useless for your homework)
    Where used, return should be executed unconditionally and always as the last statement in the function.

    That's my signature, it's not part of the damn post!

  13. #13
    Join Date
    Mar 2007
    Location
    U.K.
    Posts
    1,127
    Quote Originally Posted by shsh_shah
    can u please tell me..
    1. why '#' with container and myimage?
    2. what does that means : onmouseover=function() ?
    3. Can you please small bit tell me what is going on in rotateImage(obj,ary) function?
    [translation] I need to pass this off as my own work when my teacher asks me to explain it.
    Where used, return should be executed unconditionally and always as the last statement in the function.

    That's my signature, it's not part of the damn post!

  14. #14
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,459
    Hi there shsh_shah,
    1. why '#' with container and myimage?
    1. http://www.tizag.com/cssT/cssid.php
    2. http://www.htmlite.com/CSS003a.php
    3. http://www.w3.org/TR/REC-CSS2/select...l#id-selectors
    4. http://www.w3.org/TR/REC-CSS2/selector.html#class-html

    2. what does that mean : onmouseover=function() ?
    Instead of setting the onmouseover event handler as an attribute of the img element,
    it has been set in the javascript itself.
    This has the advantage of leaving the markup tidier and quicker to load.
    3. Can you please small bit tell me what is going on in rotateImage(obj,ary) function?
    The parameter obj refers to the element that has the mouseover.
    The parameter ary refers to the array of images to be used.

    coothead

  15. #15
    Join Date
    Apr 2008
    Posts
    11
    Thanks again my friend

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