Replacing image source on mouse hover

Question

Trying to have a different image show up on a mouseover event. Using the following JavaScript:

$('div.row-fluid').hover(function() {
    $(this).find('img').attr('src','http://leandrovieira.com/projects/jquery/lightbox/photos/image1.jpg');
 }, function() {
    $(this).find('img').attr('src','http://leandrovieira.com/projects/jquery/lightbox/photos/image2.jpg');
 });

And the following HTML:

<div class="span27 offset1" style="margin-top: -3.2em">
      <div class="searchbutton"><img src='http://leandrovieira.com/projects/jquery/lightbox/photos/image2.jpg''></div>
</div>

But no luck. What's the problem? Fiddle: http://jsfiddle.net/mpmqm/2/

Well, you're not showing your `div` with the class of `row-fluid`, so that's a problem. Also, your JS Fiddle shows two quotes following the `src` of the image. — David Thomas, Sep 03 '12 at 17:21

score 1 · Accepted Answer · answered Sep 03 '12 at 17:20

1

Add row-fluid as a class name to your container. http://jsfiddle.net/mpmqm/3/

answered Sep 03 '12 at 17:20

David Hellsing

106,495
44
176
212

score 0 · Answer 2 · answered Sep 03 '12 at 17:22

0

http://jsfiddle.net/mpmqm/4/ - your selectors are off.

answered Sep 03 '12 at 17:22

jordan.baucke

4,308
10
54
77

Has QUIT--Anony-Mousse · Answer 3 · 2012-09-03T17:36:00.793

0

Seriously, you need to learn how to debug JavaScript and jQuery.

With both Firefox and Chrome, you can open up a console and type (note: this is not the same $ as in your code!)

$('div.row-fluid')
> null

At this point you should realize that the selector did not work.

$('.row-fluid')
> null

Still null - oh, yes, there is no .row-fluid element.

Alternatively, you can enrich your code with debug statements:

console.log($('.row-fluid'))

should report that it has a length of 0.

edited Sep 03 '12 at 17:36

answered Sep 03 '12 at 17:25

Has QUIT--Anony-Mousse

76,138
12
138
194

It's not `null` but an empty set (which should indeed make it clear, though). – pimvdb Sep 03 '12 at 17:32
You are right: It's the browsers built-in support of `$` which returns `null`. It is not 100% compatible to jQuery. – Has QUIT--Anony-Mousse Sep 03 '12 at 17:34
FYI: I guess you're using Chrome to debug. If you open the console on jsFiddle it will initally run code on the main frame (which uses MooTools, which `$` function can return `null`). If you want to run code in the result window you can select it on the bottom of the console. – pimvdb Sep 03 '12 at 17:38

score 0 · Answer 4 · edited May 23 '17 at 11:49

0

I did the job for another guy here on stackoverflow in pure javascript. The only difference from your case was that he wanted image src change on mouse click. Pls. see if that helps you in correcting your code:

Toggle image src attribute using Javascript

edited May 23 '17 at 11:49

Community

1
1

answered Sep 03 '12 at 17:48

Piyush-Ask Any Difference

4,294
5
46
92

Replacing image source on mouse hover

4 Answers4