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 7 of 7
  1. #1
    New Coder
    Join Date
    Feb 2004
    Location
    Manitoba, CANADA
    Posts
    72
    Thanks
    0
    Thanked 0 Times in 0 Posts

    OnMouseOver onMouseOut with 3 images

    Hello! I have created a mouseover/mouseout event using 2 images. I am not sure how to add a third image so the mouseover/mouseout event changes images in sequence each time the mouse is passed over the image and keeps cylcing in order. Would you use an array with a for loop counter for this process? Also, how would you call the function? I guess you would place the call in the mouseover where you would normally put the image to be called?
    Thanks!

  • #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,742
    Thanks
    0
    Thanked 244 Times in 239 Posts
    Hi there Lisawynn,

    Here is one way of achieving your cycling....
    Code:
     
    <script type="text/javascript">
    //<![CDATA[
    var i=0;
    function swapImage(obj){
       var images=new Array('image.gif','image1.gif','image2.gif','image3.gif');
       obj.src=images[i];
       i++;
    if(i==images.length){
       i=0;
      }
     }
     //]]>
    </script>
    ...and this will call the function....
    Code:
    <img src="image3.gif" alt="" onmouseover="swapImage(this);return false"/>
    coothead

  • #3
    New Coder
    Join Date
    Feb 2004
    Location
    Manitoba, CANADA
    Posts
    72
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks Coothead. It is working great.

  • #4
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,742
    Thanks
    0
    Thanked 244 Times in 239 Posts
    No problem.

    You're welcome

    coothead

  • #5
    New to the CF scene
    Join Date
    Oct 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    the image changed and not looping for me.
    I used the code like this
    Code:
    <script type="text/javascript">
    //<![CDATA[
    var i=0;
    function swapImage(obj){
       var images=new Array('http://www.codingforums.com/images/smilies/frown.gif','http://www.codingforums.com/images/smilies/confused.gif','http://www.codingforums.com/images/smilies/rolleyes.gif');
       obj.src=images[i];
       i++;
    if(i==images.length){
       i=0;
      }
     }
     //]]>
    </script>
    Code:
    <img src="http://www.codingforums.com/images/smilies/rolleyes.gif" alt="" onmouseover="swapImage(this);return false"/>

  • #6
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,298
    Thanks
    203
    Thanked 2,561 Times in 2,539 Posts
    Do you have permission to hotlink to Coding Forums images?

    "Inline linking (also known as hotlinking, leeching, piggy-backing, direct linking, offsite image grabs and bandwidth theft) is the use of a linked object, often an image, from one site into a web page belonging to a second site. The second site is said to have an inline link to the site where the object is located."

  • #7
    New to the CF scene
    Join Date
    Oct 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I will not hotlink those, I was just giving an example of how I use the code


  •  

    Posting Permissions

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