Javascript — изменение src при onmouseover и onmouseout

Я хочу сделать, чтобы onmouseover изменил изображение, а onmouseout вернул изображение по умолчанию. Я использую этот код:

<div class="home-social-share">
<div style="margin-right:15px;width:11px;float:left;">
    <a href="javascript:void(0)" onclick="window.open('http://www.facebook.com/sharer.php?u=<?php the_permalink();?>&t=<?php the_title(); ?>','Condividi su Facebook','height=300, width=750,scrollbars=no, resizable=yes')">
        <img src="http://www.primapaginaonline.it/wp-content/themes/pponline/images/fbshareoff.png" alt="Condividi su Facebook" title="Condividi su Facebook" onmouseover="this.src='http://www.primapaginaonline.it/wp-content/themes/pponline/images/fbshare.png'" onmouseout="this.src='http://www.primapaginaonline.it/wp-content/themes/pponline/images/fbshareoff.png'">
    </a>
</div>
<div style="float:left;margin-right:15px;">
<a href="javascript:void(0)" onclick="window.open('http://twitter.com/share?text=<?php the_title(); ?> &bull; Prima Pagina Online&amp;url=<?php the_permalink(); ?>','Condividi su Twitter','height=300, width=500,scrollbars=no, resizable=yes')">
        <img src="http://www.primapaginaonline.it/wp-content/themes/pponline/images/tt-shareoff.png" alt="Condividi su Twitter" title="Condividi su Twitter" onmouseover="this.src='http://www.primapaginaonline.it/wp-content/themes/pponline/images/tt-share.png'" onmouseout="this.src='http://www.primapaginaonline.it/wp-content/themes/pponline/images/tt-shareoff.png'" />
</a>
</div>
<div style="float:left;">
    <a href="<?php the_permalink();?>/#disqus_thread">
        <img src="http://www.primapaginaonline.it/wp-content/themes/pponline/images/pencil-off.png" alt="Commenta l'articolo" title="Scrivi un commento sull'articolo" onmouseover="this.src='http://www.primapaginaonline.it/wp-content/themes/pponline/images/pencil.png'" onmouseout="this.src='http://www.primapaginaonline.it/wp-content/themes/pponline/images/pencil-off.png'" />
    </a>
</div>

Now, it works the onclick functions but the images remains the same, so the onmouseover and onmouseout doesn't work.

Спасибо


javascript onmouseover onmouseout
person fas    schedule 01.07.2014    source источник
comment
это плохо написано. Отделите Javascript от разметки, чтобы он был более удобочитаемым. Я могу это прочитать, но я вижу, как вы можете запутаться в том, почему это не работает.   -  person Fallenreaper    schedule 01.07.2014
comment
Что вы имеете в виду под не работает??? (Добавил весь код в скрипку.)   -  person Teemu    schedule 01.07.2014
comment
изображения меняются для меня на onmouseover и onmouseout   -  person Bharadwaj    schedule 01.07.2014
comment
@Teemu: Ну, в jsfiddle, похоже, работает, но если вы зайдете на мой сайт (www.primapaginaonline.it), вы увидите, что изображения не становятся красными, когда вы наводите на них курсор, или, по крайней мере, на моем компьютере.   -  person fas    schedule 01.07.2014
comment
Скрипка содержит именно ваш код. Пожалуйста, опубликуйте что-нибудь, с чем мы сможем воспроизвести проблему, иначе ваш вопрос не имеет смысла.   -  person Teemu    schedule 01.07.2014
comment
Попробуйте зайти на сайт, и вы увидите, что код не работает   -  person fas    schedule 01.07.2014
comment
Пожалуйста, перечитайте мой комментарий.   -  person Teemu    schedule 01.07.2014

Ответы (3)


arrow_upward
0
arrow_downward

Я не уверен, используете ли вы Jquery или нет, поэтому я приведу примеры обоих.

<img id="change" src="picture" alt="picture.jpg">

Jquery-

$('#change').on("mouseenter", function() {
    $(this).attr('src', 'picture2');
}).on("mouseleave", function() {
    $(this).attr('src', 'picture');
});

Javascript -

document.getElementById('change').addEventListener("onmouseover", function() { 
  this.src = 'picture2';
}).addEventListener("onmouseout", function() {
  this.src = 'picture';
});

Это должно вас завести!

person Raptus    schedule 01.07.2014

arrow_upward
0
arrow_downward

Используйте события onmouseover и onmouseout, потому что это работает всегда.

Пример:

<img src="picture" onmouseover="this.src='picture2'" onmouseout="this.src='picture3'">

См. также http://helplogger.blogspot.be/2012/05/create-rollover-image-effect-change.html

person User    schedule 01.07.2014

arrow_upward
0
arrow_downward

Код с вашего jsfiddle и с вашего веб-сайта имеют некоторые отличия.

Этот код взят с вашего сайта:

<img src="http://www.primapaginaonline.it/wp-content/themes/pponline/images/pencil-off.png?b33912" alt="Commenta l'articolo" title="Scrivi un commento sull'articolo" onmouseover="this.src=" http:="" www.primapaginaonline.it="" wp-content="" themes="" pponline="" images="" pencil.png?b33912""="" onmouseout="this.src=" pencil-off.png?b33912""="">

Со всем этим кодом в простом теге легко заблудиться, но если вы внимательно посмотрите, то увидите некоторые проблемы.

Во-первых, у вас есть двойные кавычки внутри двойных кавычек:

onmouseout="this.src=" pencil-off.png?b33912""=""

И некоторые из этих двойных кавычек не должны быть там, например. http:="" в

onmouseover="this.src=" http:="" www.primapaginaonline.it=""

Очистите это, и это будет работать!

person service-paradis    schedule 01.07.2014