change img src on mouseover then change back on mouseout

Question

I have one larger image with two smaller thumbnails beneath it - Marked up as follows:

<img src="../images/image.jpg" class="left main" alt="main image" /> 
<img src="../images/image2-thumb.jpg" class="left mainthumb" alt="image two" /> 
<img src="../images/image3-thumb.jpg" class="left thumb mainthumb" alt="image three" />

I would like when image2-thumb or image3-thumb is hovered over for it to change image.jpg to the hovered images src BUT without the -thumb.

so if i hover over image2-thumb.jpg then image.jpg becomes image2.jpg and so on. Then on mouseout I would like it to revert back to its original src.

I'm using the following javascript to currently do this but on click:

$(function () {
    $('.mainthumb').click(function () {
        $('.main').attr('src', this.src.replace('-thumb', ''))
    });
});

I'd like to change this to hover but not sure how.

dude, learn `javascript/jQuery` or else you'll just copy/paste code all the time... your last answer question just swaps click with mouseover — Phil, Jan 30 '14 at 14:39

score 1 · Answer 1 · edited May 23 '17 at 12:08

1

Use .hover()

$(function () {
    $('.mainthumb').hover(function () {
        $('.main').prop('src', this.src.replace('-thumb', ''));
    }, function () {
        $('.main').prop('src', '../images/image.jpg');
    }
});

and Use .prop() instead of .attr()

Read .prop() vs .attr()

edited May 23 '17 at 12:08

Community

1
1

answered Jan 30 '14 at 14:40

Tushar Gupta - curioustushar

58,085
24
103
107

score 1 · Answer 2 · answered Jan 30 '14 at 15:06

1

Simplest way to do this without jQuery using pure JS.

Something like this

<img src="first.png" onmouseover="this.src='second.jpg';"
        onmouseout="this.src='first-or-other-image.png'">

Maybe not very beautiful but works properly

answered Jan 30 '14 at 15:06

Sergey Pekar

8,555
7
47
54

1

Someone gave this a -1, but I think this is a working solution which is not off topic. – TwilightSun Jan 30 '14 at 16:38
Works like a charm and is very simple - should be the accepted solution! – adilbo Apr 02 '19 at 15:46

timmkrause · Answer 3 · 2014-01-30T15:46:44.083

0

$('.mainthumb').mouseenter(function () {
    // Do your stuff.
});

$('.mainthumb').mouseleave(function () {
    // Do your stuff.    
});

Also see the .hover() documentation.

edited Jan 30 '14 at 15:46

answered Jan 30 '14 at 14:38

timmkrause

3,367
4
32
59

score 0 · Answer 4 · answered Jan 30 '14 at 14:40

0

I would do this with .hover() with callbacks

$('.mainthumb').hover(function () {
      // change the src        
}, function () {
      // change back the src 
});

answered Jan 30 '14 at 14:40

Praveen

55,303
33
133
164

score 0 · Answer 5 · answered Jan 30 '14 at 14:44

Add the data attribute to the first image to store the original file pointer ("image.jpg") like this:

<img src="../images/image.jpg" data-original="../images/image.jpg" class="left main" alt="main image" />

And then add this to your javascript:

$(function () {
    $('.mainthumb').hover(function () {
        $('.main').attr('src', this.src.replace('-thumb', ''))
    }, function() {
        var main = $('.main');
        main.attr('src', main.attr('data-original'));
    });
});

change img src on mouseover then change back on mouseout

5 Answers5