SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Feb 2012
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Sequence mouseover images?

    Hi there.

    I'm trying to make a little valentines site '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.

    Thanks.

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

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Something like the following might do.

    Code javascript:
    var image = document.getElementById('card');
    image.images = ['a.jpg', 'b.jpg', 'c.jpg', 'd.jpg', 'e.jpg'];
    image.counter = 0;
     
    image.onmouseover = function () {
        this.counter += 1;
        this.src = this.images[this.counter];
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Enthusiast
    Join Date
    Nov 2011
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Cool

    Hi Paul,
    Can this code be placed into a Wordpress post?
    How will the code look mlike if so?


Bookmarks

Posting Permissions

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