Селектор Jquery: как: изменить атрибут src тега изображения при наведении на ссылку

Мне нужно изменить атрибут src изображения, когда ссылка наводится

<div class="clear span-33 last" id="navigation">
  <div class="hicon span-1"><a href="#" title="Homepage"><img src="../Assets/images/home.png" /></a></div>
</div>

Также измените его на значение по умолчанию, когда ссылка не наводится...


jquery jquery-selectors
person Joberror    schedule 06.01.2010    source источник

Ответы (5)


arrow_upward
8
arrow_downward

Вы действительно должны изучить использование спрайтов CSS для переключения фона при наведении. Но если вам нужно сделать это в jQuery, это должно сделать что-то вроде этого. Просто измените исходное изображение по своему вкусу (также предварительно загружает изображение при наведении):

var link = $('a'), 
    img  = link.children('img'), 
    orig = img.attr('src'), 
    over = 'over.png', 
    temp = new Image();

temp.src = over; // preloads

link.hover(function() {
    img.attr('src',over);
},function() {
    img.attr('src',orig);
}
person David Hellsing    schedule 06.01.2010

arrow_upward
4
arrow_downward

Я понимаю, что иногда вы не можете просто поменять местами фоновое положение, поэтому я тоже искал это с помощью навигации на основе IMG (также работает просто rmbr для загрузки jquery):

<script type="text/javascript">
$(document).ready(function(){

    $(".navbar li").each(function(){
        var link = $(this).children("a");
        var image = $(link).children("img");
        var imgsrc = $(image).attr("src");

        // add mouseover
        $(link).mouseover(function(){
            var on = imgsrc.replace(/.jpg$/gi,"_over.jpg");
            $(image).attr("src",on);
        });

        // add mouse out
        $(link).mouseout(function(){
            $(image).attr("src",imgsrc);
        });
    });

});
</script>



<ul class="navbar"><li><a href="#"><img src="/images/nav_home.jpg" alt="home" /></a></li>
    <li><a href="#"><img src="/images/nav_item2.jpg" alt="Item2" /></a></li>
    <li><a href="#"><img src="/images/nav_item3.jpg" alt="Item3" /></a></li>
     </ul>
person Lorenzo816    schedule 04.03.2010

arrow_upward
1
arrow_downward

Этот вопрос может помочь: img src & jQuery?

person Justin Ethier    schedule 06.01.2010

arrow_upward
0
arrow_downward

Это должно сделать это.

$('a[title="Homepage"]').hover(
    function () {
        // this is the mouseon event
        $(this).children('img').attr('src', 'newimage.png');
    }, 
    function () {
        // this is the mouseout event
        $(this).children('img').attr('src', '../Assets/images/home.png');
    }
);
person defrex    schedule 06.01.2010
comment
Я пробовал это много раз, даже с другим селектором атрибутов, но у меня не работало... или это b/cos, я использую строгий материал xhtml - person Joberror; 07.01.2010

arrow_upward
0
arrow_downward

Это мой подход, и он работает, но выглядит слишком странно и сделал меня новичком в jQuery.

                $('.hicon > a').hover(
                                  function(){
                                      $(this).html("<img src='../Assets/images/homeah.png' />");
                                      },
                                  function(){
                                      $(this).html("<img src='../Assets/images/home.png' />");
                                      }
                                  );

Я верил, что есть лучший подход. Спасибо

person Joberror    schedule 06.01.2010