Simple jquery image rollover

Question

I have multiple thumbnails and want the main image to represent a large version of the thumbnail when each thumbnail is rolled over. I appreciate this must be a common usage, but I am struggling to find a simple solution. I have used the following code, which I appreciate may be poor, but this is all quite new for me.. thanks

$('.thumbnail').mouseover(function() {
    var currentimg = $('this').attr('src');
    $('#imageMain img').attr('src', currentimg);
});

I haven't included the HTML as I guess it's pretty clear what I am trying to achieve.

score 3 · Accepted Answer · answered May 08 '12 at 14:17

3

have you tried changing

$('this').attr('src');

with

$(this).attr('src');

?

answered May 08 '12 at 14:17

bjornruysen

850
1
6
15

I don't suppose you could point me in the right direction for returning the image back to normal on mouse out? – Pete Norris May 08 '12 at 14:33
So you want it to return to the original state/image? – bjornruysen May 08 '12 at 14:36
What you *could* do is have a variable with the original src in it. And than set the src in the mouseout handler of the main image. – bjornruysen May 08 '12 at 14:38
hmm adding code here doesn't exactly work :) you understand what I mean? – bjornruysen May 08 '12 at 14:40

score 0 · Answer 2 · answered May 08 '12 at 14:19

0

You should create a class for both rollover states, and then you can just use the toggleClass function:

$(".thumbnail").hover(function(){
    $(this).toggleClass("rollover");
});

answered May 08 '12 at 14:19

James Johnson

45,496
8
73
110

Huangism · Answer 3 · 2014-11-10T20:39:21.710

0

Change $('this') to $(this)

it should work, when using "this" to refer to the current object, it does not need quotes

edited Nov 10 '14 at 20:39

answered May 08 '12 at 14:20

Huangism

16,278
7
48
74

Simple jquery image rollover

3 Answers3