Как изменить изображение с hover.jpg с помощью jQuery? - PullRequest
Новая
       13

Как изменить изображение с hover.jpg с помощью jQuery?

1 голос
/ 10 мая 2011

У меня есть следующий вывод. 

<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>
...

Теперь, когда я наведу любое изображение, я хочу изменить его на hover.jpg с помощью jquery.

У меня есть следующее, но оно не работает. 

$(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);
        });
});

Ответы [ 2 ]

1 голос
/ 10 мая 2011

только незначительное исправление 

$(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"));
        });
});

Вы должны хранить данные в объекте

0 голосов
/ 10 мая 2011

jQuery код, использующий метод data(), упрощает его. 

$('.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') );
});
...