www.webdeveloper.com
Results 1 to 2 of 2

Thread: Sequence mouseover

  1. #1
    Join Date
    Feb 2012
    Posts
    1

    Sequence mouseover

    Hi there.

    I'm trying to make a little valentines website 'card' for my ladyfriend. I was going to be clever about it and use javascript, but as it turns out I'm really not that clever with it anymore. I need a single image to change into a different image on each following mouseover event. A planned 'route' of images, for exameple A -> B -> C -> D -> E -> A -> F - > B -> .. and so on.

    I thought I could do this, but I'm getting nowhere. I did try to look for similar attempts to make this, but it's kind of hard to find since 'mouseover' is such a generic search term.

    There's little point for me in posting my code so far.. it's just a long list of imagecodes and a little mouseover script that would probably make you laugh.

    Thanks.

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

    Lightbulb

    It would be more helpful if you provides SOME code attempt, even if it is only the images.
    As it is, you will need to modify this to your needs as this is just a SWAG as to your needs.
    Code:
    <!DOC HTML>
    <html>
    <head>
    <title> Valentines </title>
    <script type="text/javascript">
    // From: http://www.webdeveloper.com/forum/newreply.php?do=postreply&t=256670
    
    //<![CDATA[
    var baseURL = 'http://www.nova.edu/hpd/otm/pics/4fun/';
    var imgList = ['11.jpg','12.jpg','13.jpg','14.jpg','15.jpg'];
    var imgCount = -1;
    function changeImg() {
      imgCount++;
      if (imgCount < imgList.length) {
        document.getElementById('mainImg').src = baseURL+imgList[imgCount];
      } else {
        alert('Happy Valentine');
      }
    }
    
    window.onload = function() {
      changeImg();
    }
    //]]>
    </script>
    
    </head>
    <body>
    Click on image<br>
    <img src="" id="mainImg" onclick="changeImg()">
    </body>
    </html>
    Happy Valentine to you too!

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