селектора Jquery: Как изменить атрибут SRC тега изображений на ссылку парении

Question

мне нужно изменить атрибут 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> 

Кроме того, измените его значение по умолчанию при ссылка не парил на ...

Answer 1

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

Answer 2

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

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

Answer 3

Вы действительно должны изучить 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); 
} 

Answer 4

Это мой подход, и это работает, но выглядит слишком странно и заставил меня послушник JQuery

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

I полагал, что есть более подходящий подход. Благодаря

Answer 5

Я иногда понимаю, что вы не можете просто поменять положение фона, так что я тоже искал это с основанным 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>