Изменить изображение onmouseover

Ответ 1

Попробуйте что-то вроде этого:

HTML

<img src='/folder/image1.jpg' id='imageid'/>

JQuery

$('#imageid').hover(function() {
  $(this).attr('src', '/folder/image2.jpg');
}, function() {
  $(this).attr('src', '/folder/image1.jpg');
});

• DEMO

РЕДАКТИРОВАТЬ: (после публикации OP HTML)

HTML:

<a href="#" id="name">
    <img title="Hello" src="/ico/view.png"/>
</a>

JQuery

$('#name img').hover(function() {
  $(this).attr('src', '/ico/view1.png');
}, function() {
  $(this).attr('src', '/ico/view.png');
});

• DEMO

Ответ 2

здесь встроенный встроенный код javascript для изменения изображения onmouseover и onmouseout:

<a href="#" id="name">
    <img title="Hello" src="/ico/view.png" onmouseover="this.src='/ico/view.hover.png'" onmouseout="this.src='/ico/view.png'" />
</a>

Ответ 3

Чтобы поставить точку или две перед /

('src','./ico/view.hover.png')"

Ответ 4

Вот пример:

Код HTML:

<img id="myImg" src="http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif"/>

Код JavaScript:

$(document).ready(function() {
    $( "#myImg" ).mouseover(function(){
        $(this).attr("src", "http://www.jqueryui.com/images/logo.gif");
    });

    $( "#myImg" ).mouseout(function(){
        $(this).attr("src", "http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif");
    });
});

Изменить: Извините, ваш код был немного странным. Теперь я понял, что вы делаете.;) Разумеется, метод наведения будет лучше.

Ответ 5

jQuery имеет .mouseover() и .html(), Вы можете связать событие mouseover с функцией:

• Скрывает текущее изображение.
• Заменяет текущее html-изображение тем, которое вы хотите переключить.
• Показывает div, который вы спрятали.

То же самое можно сделать, когда вы получите событие mouseover, указывающее, что курсор больше не висит над div.

Ответ 6

Вы можете сделать это, просто используя CSS.

Вам нужно будет поместить еще один тег внутри <a>, а затем вы можете изменить атрибут CSS background-image на a:hover.

то есть.

HTML:

<a href="#" id="name">
  <span>&nbsp;</span> 
</a>

CSS

a#name span{
  background-image:url(image/path);
}

a#name:hover span{
  background-image:url(another/image/path);
}

Ответ 7

<a href="" onMouseOver="document.MyImage.src='http://icons.iconarchive.com/icons/uiconstock/round-edge-social/72/ask-icon.png';" onMouseOut="document.MyImage.src='http://icons.iconarchive.com/icons/uiconstock/round-edge-social/72/arto-icon.png';">
<img src="http://icons.iconarchive.com/icons/uiconstock/round-edge-social/72/arto-icon.png" name="MyImage">

Demo http://jsfiddle.net/W6zs5/

Ответ 8

Я знаю, что кто-то ответил так же, но я сделал свое собственное исследование, и я написал это раньше, чтобы увидеть этот ответ. Итак: я искал что-то простое с встроенным JavaScript, только с img, без "обертывания" его в тег a (поэтому вместо document.MyImage я использовал this.src)

<img 
onMouseOver="this.src='ico/view.hover.png';" 
onMouseOut="this.src='ico/view.png';" 
src="ico/view.png" alt="hover effect" />

Он работает во всех обновленных браузерах; IE 11 (и я также тестировал его в Инструментах разработчика IE от IE5 и выше), Chrome, Firefox, Opera, Edge.