Javascript-更改onmouseover和onmouseout的src

我想在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不能工作

感谢使用onmouseover和onmouseout事件，因为它总是有效的

例如：

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

---

另请参见

我不确定您是否在使用Jquery，因此我将提供这两种方法的示例

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

Javascript-

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

那会让你走的

您网站上的代码与您网站上的代码有些不同

此代码来自您的网站：

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

其中一些双引号不应该存在，例如http:=in

---

把这个清理干净，它会工作的

这篇文章写得很差。将Javascript与标记分离，使其更具可读性。我可以读，但我可以看到你怎么会迷路，为什么它不工作，你是什么意思？？？将整个代码添加到fiddle中。在onmouseover和上为我更改图像onmouseout@Teemu：好的，在JSFIDLE中似乎可以工作，但如果您访问我的网站www.primapaginaonline.it，您可以看到图像在悬停时不会变为红色，或者至少在我的电脑上不会变为红色。fiddle中正好包含您的代码。请张贴一些我们可以复制的问题，否则你的问题没有任何意义。

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

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