Change image source on mouseover then get the image back on mouseout

Question

<img src="img/image1.png" id="mainimage">

<p><a href="#" id="pet1">Dog</a></p>
<p><a href="#" id="pet2">Cat</a></p>

I am trying to use JavaScript/jQuery so that whenever a user places their mouse over any of the links with the id's pet1 & pet2 it will change the image src of the image with the id of mainimage.

var img = document.getElementById('swap');
document.getElementById('pet1').onmouseover = function(){
    // manipulate the image source here.
    img.src = img.src.replace(/\.jpg/, '-on.jpg');
}

The above JavaScript is a script I found here that seems to have the functionality I am looking for. The only problem is that whenever my mouse is over the link it does not display the image I want. Ok, the question I am looking for is how can I make the image with the source (img/pet1.jpg) appear?

Any help will be appreciated!

any specific reason you want to do this with javascript?? CSS has a very simple solution for this — hahaha, Oct 02 '14 at 12:09
@Alexandros — No, it doesn't. It's a content image, not a background image. — Quentin, Oct 02 '14 at 12:10
Guys whatever works really CSS, JAVASCRIPT, Whatever. Just something that work would be awesome. — Abraham Guzman, Oct 02 '14 at 12:21
@GuyT — Doesn't work in Firefox (haven't tested in any IE). — Quentin, Oct 02 '14 at 12:24
@Quentin That true, it also doesn't work in IE. It all depends on the project requirements. If you only need to support Chrome it's an excellent solution, though. — GuyT, Oct 02 '14 at 12:34
I just need something that works similar to that. Something that can support on most browsers. It can be based on css or javascript. — Abraham Guzman, Oct 02 '14 at 13:03

score 1 · Answer 1 · answered Oct 02 '14 at 12:16

Try this more simply

$(function() {
    $("#pet1")
        .mouseover(function() { 
            var src = 'first image path';
            $("#mainimage").attr("src", src);
        })
        .mouseout(function() {
            var src2 ='Default image path';
            $(this).attr("src", src2;
        });
});

Similllar for second image and for shortening even this you can give a class to every link you want and then by using $(element).each() function and "data" attribute of html5 you can manage it in more cool way

Shai · Accepted Answer · 2014-10-02T14:49:50.000

0

This should get you started.

For all links at once we set a mouseover handler (which takes the ID of the link, turns it into a path to the image, and displays it) and a mouseout handler (which reverts the image's src to its original image).

$(document).ready(function() {
    // To start with, get a reference to the image and its original src
    var $mainImage = $('#mainimage'),
        originalImageSrc = $mainImage.attr('src');

    // Then add mouseover and mouseout handlers to all the links
    $('a')
        .on('mouseover', function() {
            var newImageSrc = 'img/' + $(this).attr('id') + '.jpg';
            $mainImage.attr('src', newImageSrc);
        })
        .on('mouseout', function() {
            $mainImage.attr('src', originalImageSrc);
        });
});

You can see it working in this JSFiddle. So that you can see it working in the JSFiddle without real images, I've used a div's text rather than an img's src, but that's just for the demo.

Of course you could always adapt it (maybe you want to be more specific than all a tags, and maybe you don't always want to use the format img/<id>.jpg – in which case you could add a data-img-src attribute to all your links and use .data('imgSrc') instead of the .attr('id')).

edited Oct 02 '14 at 14:49

answered Oct 02 '14 at 12:10

Shai

7,159
3
19
22

Thanks for the response. Uhh, I want to add in a new image source to the mainimage that goes like this: img/name4.jpg where can I add that in??? sorry I am barley new to this. – Abraham Guzman Oct 02 '14 at 12:32
Well then after your `
Cat
` just add another one of `
Name 4
` – everything will work automatically, it will pick up the ID (`name4`) and so when you hover it the image will change to `img/name4.jpg`. Or have I misunderstood? – Shai Oct 02 '14 at 12:34
Going to check this out real quick. Thanks again for your response. – Abraham Guzman Oct 02 '14 at 12:36
I think it is interrupting some other javascript I have on my page. Do you think it might be becuase I have the other script to load when the document is ready aswell? – Abraham Guzman Oct 02 '14 at 12:53
@AbrahamGuzman No, you can have multiple `$(document).ready(...)`. One possibility is the bracket that I'd missed off: the last line was accidentally `}` instead of `});`. – Shai Oct 02 '14 at 13:00

score 0 · Answer 3 · answered Oct 02 '14 at 13:01

Hopefully this is what you're looking for.

HTML:

<img src="http://placehold.it/300x150" id="theImage">
<p><a href="#" class="yourClass" data-img="http://placehold.it/300x150/f00">Red</a></p>
<p><a href="#" class="yourClass" data-img="http://placehold.it/300x150/00f">Blue</a></p>

JS:

$('.yourClass').hover(function() {
  var newImg = $(this).data('img');
$('#theImage').attr('src',newImg)
}, function() {
  $('#theImage').attr('src','http://placehold.it/300x150')
});

JSFiddle

Change image source on mouseover then get the image back on mouseout

3 Answers3