Jquery/ hover and change img

Question

I use the next, in order to change the picture, when I hover the image:

<img id="image1" src="imimage.jpg" alt="facebook.com">

$('#image1').hover(function() {
    $('#image1').attr('src', 'imanewimage.jpg');
}, function() { 
    $('#image1').attr('src', 'imimage.jpg'); 
});

But something really weird happens: When I load the HTML, the imimage.jpg loaded. But when I hover it, the imimage.jpg doesn't load and only the alt attribute is shown.

What can be the reason?

Also, on a side note, you should use prop() instead of attr(), which is deprecated. — Romain Braun, May 10 '13 at 14:12
@tymeJV: No. But when I use img from the net (*/http://www...*/) is shown — Tom Avni, May 10 '13 at 14:13
@MohammadAdil: Yes, and as I said, when I inital my page with 'imimage.jpg', I can see the image — Tom Avni, May 10 '13 at 14:15
@RomainBraun -- `.attr()` is not deprecated, it is still used. See: http://stackoverflow.com/questions/15070277/why-jquery-1-9-attr-method-not-deprecated — tymeJV, May 10 '13 at 14:16
_But when I hover it, the imimage.jpg doesn't load and only the alt attribute is shown_.. that mean's your original image isn't available/accessible. — Adil Shaikh, May 10 '13 at 14:20
@MohammadAdil: So how it available when I load my page? Again, I can see the image before I hover it, and the src is the same — Tom Avni, May 10 '13 at 14:22
@TomAvni See it here working --> http://jsfiddle.net/mohammadAdil/LWteu/3/ — Adil Shaikh, May 10 '13 at 14:23

score 1 · Answer 1 · answered May 10 '13 at 14:15

1

Your code above is correct, the alt tag is showing because the image most likely isn't in the proper location. Based on your code, the image should be in the same directory as your pages.

Test this with images from the internet (you said they are working), must be a file location issue.

answered May 10 '13 at 14:15

tymeJV

103,943
14
161
157

I don't think it file location issue, because as I said, I can see the image before I hover it. and the src is the same. – Tom Avni May 10 '13 at 14:17

score 0 · Answer 2 · answered May 10 '13 at 14:15

You could simplify this by using css to change the image instead of javascript, which would make it more universally compatible and easier to code...

<div class='imageToHover'></div>

.imageToHover {
   /*you probably want some height/width stuff in here too*/
   background-image: url(imimage.jpg);
}
.imageToHover:hover {
   background-image: url(imanewimage.jpg);
}

Jquery/ hover and change img

2 Answers2