43 users online (2 members and 41 guests)  


  Results 1 to 4 of 4

Related

  1. onmouseover to change value to true?    Forum: Javascript Forum
    Replies: 0
  2. A little help with OnMouseover fade in/out menu    Forum: Javascript Forum
    Replies: 6
  3. update text files easily    Forum: HTML Forum
    Replies: 2
  4. easily update links    Forum: Website Scripts Forum
    Replies: 2
  5. custom cursor onmouseover?    Forum: HTML Forum
    Replies: 2
  1. #1
    blue_masked_man's Avatar
    New User

    Status
    Offline
    Join Date
    Nov 2007
    Posts
    2

    onMouseover..can this be done easily?

    I am wanting to cycle through a series of 3 images instead of only two & only on the onMouseover event
    I know the code for a simple 2 image rollover but I am trying to think of a way to do this with 3 images.
    Code:
    <img src="image1.gif" name="pic1" onMouseOver="document.pic1.src='image2.gif'">
    I would appreciate a steer in the right direction

  2. #2
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: onMouseover..can this be done easily?

    Hi there blue_masked_man,

    and a warm welcome to these forums.
    I am wanting to cycle through a series of 3 images instead of only two
    Why settle for just three?

    The following example will cycle through any number of images.....
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <base href="http://mysite.orange.co.uk/azygous/images/"> <!--this is for coothead testing and should be removed-->
    
    <style type="text/css">
    #myimg {
        display:block;
        border:3px double #000;
        margin:50px auto;
     }
    </style>
    
    <script type="text/javascript">
    
      var c=0;
      var pics=[
               'anim.gif',
               'anim1.gif',
               'anim2.gif',
               'anim3.gif',
               'anim4.gif',
               'anim5.gif'
               ];
    
    window.onload=function() {
    document.getElementById('myimg').onmouseover=function() {
     swapImage(this);
      }
     }
    
    function swapImage(el) {
       c++;
    if(c==pics.length) {
       c=0;
      }
       el.src=pics[c];
     }
    
    </script>
    
    </head>
    <body>
    
    <div>
    <img id="myimg" src="anim.gif" alt="">
    </div>
    
    </body>
    </html>

  3. #3
    blue_masked_man's Avatar
    New User

    Status
    Offline
    Join Date
    Nov 2007
    Posts
    2

    Re: onMouseover..can this be done easily?

    thank you coothead

  4. #4
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: onMouseover..can this be done easily?

    No problem, you're welcome.



Tags for this Thread