Javascript - 在 onmouseover 和 onmouseout 更改 src答案

【问题标题】：Javascript - Change src at onmouseover and onmouseoutJavascript - 在 onmouseover 和 onmouseout 更改 src
【发布时间】：2014-07-01 11:18:50
【问题描述】：

我想这样做 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 不起作用。

谢谢

【问题讨论】：

这写得不好。将 Javascript 从标记中分离出来，使其更具可读性。我可以阅读它，但我可以看到您如何迷失它为什么不起作用
"doesn't work" 是什么意思？？？（将整个代码添加到小提琴中。）
在onmouseover 和onmouseout 上为我更改图像
@Teemu：嗯，在 jsfiddle 中似乎可以工作，但如果你访问我的网站 (www.primapaginaonline.it)，你会看到图像在悬停时不会变红，或者在至少在我的电脑上。
小提琴包含您的代码。请发布一些我们可以重现问题的内容，否则您的问题没有任何意义。

标签： javascript onmouseover onmouseout

【解决方案1】：

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

这应该会让你继续前进！

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案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=""

清理它，它会工作的！

【讨论】：