使用JavaScript在悬停时更改img src

Question

My code is in PHP and I would want to change the image button1.png to button2.png on hover. The image should still be clickable.

$link = "<a class='wplink' href='something' title='something' rel='nofollow'>". "<img src='button1.png' />" ."</a>";

Answer 1

Try this, I think it will do.

The onmouseout and onmouseover should be on the hyperlink tag.

$link = "<a class='wpfp-link' href='?wpfpaction=".$action."&amp;postid=". $post_id . "' title='". $opt ."' rel='nofollow' onmouseover=\"document.but.src='".WPFP_PATH."/vault-button2.png'\" onmouseout=\"document.but.src='".WPFP_PATH."/vault-button1.png'\">

";

Answer 2

试试这个：

echo $link = "<a class='wpfp-link' href='?wpfpaction=".$action."&postid=". $post_id . "' title='". $opt ."' rel='nofollow' onmouseover='javascript:document.getElementById(\"but\").src=\"".WPFP_PATH."/vault-button2.png\"' onmouseout='javascript:document.getElementById(\"but\").src=\"".WPFP_PATH."/vault-button1.png\"' > <img src='".WPFP_PATH."/vault-button1.png' name='but' id='but'/></a>";

Answer 3

Try this:

$("img").on("mouseover", function(){
    $(this).attr("src","img2.png");
});