Change Image On Hover Javascript

Я сделал свое исследование и посмотрел на множество вещей, но никто из них не работает для меня. Это мой код на данный момент. Исходное изображение отображается нормально, но при наведении курсора ничего не происходит.Change Image On Hover Javascript

Javascript (В <head>)

<script> 
    function onHover() 
    { 
     $("#news").attr('src', 'img/newsHover.png'); 
    } 

    function offHover() 
    { 
     $("#news").attr('src', 'img/news.png'); 
    } 
</script>

HTML

<img id="news" onmouseover="onHover();" onmouseout="offHover();" height="100px" width="100px" src="img/news.png"></a>

источник

2015-02-08 STFLightning

Ваш код верный. Пожалуйста, проверьте консоль на наличие других ошибок. – roshan

Код верный. Проверьте пути изображения и консоль на наличие ошибок. Вот рабочий [jsfiddle] (http://jsfiddle.net/dqznem8z/) –

Пока вы используете jQuery, вы можете взглянуть на [jQuery hover] (http://api.jquery.com/hover/) , Взятие onmouse из html может сделать вашу страницу более удобной для обслуживания –

Чистый Java Script ответ, нет необходимости в каких-либо внешних функций или JQuery

<img id="news" onmouseover="this.src='img/newsHover.png'" onmouseout="this.src='img/news.png'" height="100px" width="100px" src="img/news.png">

источник

2015-02-09 10:03:49 abhiklpm

Там могут быть веские основания для того, что вы делаете, но вы уверены, что вам нужно использовать JavaScript ?

Если вы ничего сверхъестественного не делает, то это, вероятно, будет лучше использовать селектор CSS парения: http://www.w3schools.com/cssref/sel_hover.asp

источник

2015-02-08 19:42:20 Dan

Более подробное объяснение можно найти на [developer.mozilla.org] (https://developer.mozilla.org/en-US/docs/Web/CSS/:hover) –

Обычно я использую CSS, но я работая с круговыми изображениями, и я не хочу иметь квадратный div с фоном изображения круга. Боюсь, перфекционизм. – STFLightning

это очень простой пример, а не анимация:

HTML:

<img src='https://cdn2.iconfinder.com/data/icons/crystalproject/128x128/apps/clean.png'>

использование JQuery:

$(document).ready(function(){ 
    $('img').hover(
     function(){$(this).attr("src","https://cdn2.iconfinder.com/data/icons/crystalproject/128x128/apps/exit.png")}, 
     function(){$(this).attr("src","https://cdn2.iconfinder.com/data/icons/crystalproject/128x128/apps/clean.png")} 
    ); 
});

Example Not Animation

И это пример с анимацией:

HTML:

<img src='https://cdn2.iconfinder.com/data/icons/crystalproject/128x128/apps/clean.png' class='clean' > 
<img src='https://cdn2.iconfinder.com/data/icons/crystalproject/128x128/apps/exit.png' class='exit' >

CSS:

img{ 
    position:absolute; 
    top:0; 
    left:0; 
}

использование JQuery:

$(document).ready(function(){ 

    $(".exit").hide(); 

    $(".clean").hover(function(){ 
     $(".clean").fadeOut(); 
     $(".exit").fadeIn(); 
    });  

    $(".clean").mouseleave(function(){ 
     $(".exit").fadeOut(); 
     $(".clean").fadeIn(); 
    });  

});

Example With Animation

источник

2015-02-09 09:27:44 Zombyii

Пробовал свой код, пример без анимации работал на сайте, с которым вы связались, но не на моем. Возможно, проблема связана с файлом изображения. – STFLightning

Таким образом, вы можете использовать только этот пример:

<img 
    src='https://cdn2.iconfinder.com/data/icons/crystalproject/128x128/apps/clean.png' 
    onmouseover="this.src='https://cdn2.iconfinder.com/data/icons/crystalproject/128x128/apps/exit.png'" 
    onmouseout="this.src='https://cdn2.iconfinder.com/data/icons/crystalproject/128x128/apps/clean.png'" 
    height="100px" 
    width="100px" 
    id="news" 
>

EXAMPLE

источник

2015-02-09 10:13:13 Zombyii

Change Image On Hover Javascript

ответ

Смежные вопросы