Sequence mouseover images?

JavaScript
1

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

Something like the following might do.


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];
}
3

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