How to change an image with a hover.jpg with jQuery?

Question

I have the following output.

<ul id='centrelist'>
<li class="centreicon"><a href="admin/manage_mycentre/22"><img width='70' height='70' class='centreimg' src="http://localhost/aktivfitness_new/assets/images/centre/centre1.jpg" /></a><div class="buttons"><a href="admin/manage_mycentre/22">Aktiv trening Arendal</a></div></a></li>
<li class="centreicon"><a href="admin/manage_mycentre/16"><img width='70' height='70' class='centreimg' src="http://localhost/aktivfitness_new/assets/images/centre/centre2.jpg" /></a><div class="buttons"><a href="admin/manage_mycentre/16">Aktiv trening Blindheim</a></div></a></li>
<li class="centreicon"><a href="admin/manage_mycentre/17"><img width='70' height='70' class='centreimg' src="http://localhost/aktivfitness_new/assets/images/centre/centre3.jpg" /></a><div class="buttons"><a href="admin/manage_mycentre/17">Aktiv trening Eid</a></div></a></li>
...

Now when I hover any image, I want to change it to hover.jpg with jquery.

I have the following but it is not working.

$(function() {
    $(".centreimg")
        var orgimg = $(this).attr("src");
        .mouseover(function() {
            var hoverimg = $(this).attr("src").match(/[^\.]+/) + "hover.jpg";
            $(this).attr("src", hoverimg);
        })
        .mouseout(function() {
            $(this).attr("src", orgimg);
        });
});

Any reason you aren't using CSS background images, and then changing it on hover using the :hover pseudo selector? — Rich Bradshaw
– Rich Bradshaw, Commented May 10, 2011 at 16:36
I am with @rich-bradshaw, css approach for this case sounds as the best option — Naoise Golden
– Naoise Golden, Commented May 10, 2011 at 16:46

simon · Accepted Answer · 2011-05-10 16:42:46Z

1

just a minor correction

$(function() {
    $(".centreimg").mouseover(function() {
            var hoverimg = $(this).attr("src").match(/[^\.]+/) + "hover.jpg";
            var orgimg = $(this).attr("src");

            $(this).attr("src", hoverimg);
            $(this).attr("title", orgimg);
        })
        .mouseout(function() {
            $(this).attr("src", $(this).attr("title"));
        });
});

You have to store data within object

answered May 10, 2011 at 16:42

simon

1,20311 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Naoise Golden · Accepted Answer · 2011-05-10 16:52:08Z

0

jQuery code using the data() method, it makes it simpler.

$('.centreimg').hover( 
function() {
    $(this).data('src',$(this).attr('src'));
    $(this).attr('src', 'hover.jpg' ); //or hoverimg if it is declared
},
function(){
    $(this).attr('src', $(this).data('src') );
});

answered May 10, 2011 at 16:52

Naoise Golden

8,9314 gold badges52 silver badges66 bronze badges

Collectives™ on Stack Overflow

How to change an image with a hover.jpg with jQuery?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related