Javascript-在onmouseover和onmouseout处更改src

Question

我想这样做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>

现在，它可以使用onclick函数，但是图像保持不变，因此onmouseover和onmouseout不起作用。

谢谢

Answer 1

使用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

Answer 2

我不确定您是否使用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';
});

那应该让你走！

Answer 3

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=""

清理它，它将起作用！