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

清理它，它会起作用！

Javascript - 在onmouseover和onmouseout上更改src

3 个答案: