Show different image on each hover

Question

I have logo in different colors. I want to make that on each hover images change. Default image is black, then hover1 image is red, hover2 image is yellow, hover3 image is blue. And then again starting from black and so on. Any ideas?

Thanks for help

Add a counter inside your hover function and play with it using modulo — Charaf JRA, Sep 18 '13 at 08:03

score 2 · Accepted Answer · answered Sep 18 '13 at 08:06

DEMO: http://jsfiddle.net/FKAcs/

var logos = ["http://placekitten.com/100", "http://placekitten.com/200", "http://placekitten.com/300"];

var i = 0;

$('#logo').mouseover(function () {
    $(this).attr('src', logos[++i % logos.length]);
});

Essentially this maintains a counter (i) which increases on every mouseover event.

Based on the value of this counter we show the corresponding item in our logo array.

Charaf JRA · Answer 2 · 2013-09-18T08:32:11.517

1

Try this : DEMO HERE

var images=['https://www.gravatar.com/avatar/8a5b9d17248e0a9b953c0d5b94a9f2cb?s=128&d=identicon&r=PG','https://www.gravatar.com/avatar/7512241adf8b7fb3e19c19c06f775ee3?s=128&d=identicon&r=PG','https://www.gravatar.com/avatar/de2ea38f6a28646832eafb034951a982?s=128&d=identicon&r=PG'];

var counter=0;
$('#box').mouseenter(function(){
 $(this).attr('src',images[counter]);
 counter++;
 if(counter==images.length) counter = 0 ;
})

edited Sep 18 '13 at 08:32

answered Sep 18 '13 at 08:18

Charaf JRA

8,249
1
34
44

Why `new Array()` instead of `[]`? – Pavlo Sep 18 '13 at 08:21
i came from java :D , both are corrects – Charaf JRA Sep 18 '13 at 08:27
Yes, but `[]` (literal) is faster: http://stackoverflow.com/questions/7375120/why-is-arr-faster-than-arr-new-array – Pavlo Sep 18 '13 at 08:29
thanks for this information , i will edit :) – Charaf JRA Sep 18 '13 at 08:32

Show different image on each hover

2 Answers2