图片鼠标悬停效果

Question

我的目标是制作一个简单的鼠标悬停效果。到目前为止我有这个，它不适合我。我一直在尝试许多不同的方法，但都行不通。

<html>
<head>
<script type="text/javascript">
function mouseOver()
{
document.getElementByid("mouseIMG”).src="EOils.jpg";
}
function mouseOut()
{
document.getElementById("mouseIMG”).src="Hotrocks.png";
}
</script>

<title>Index</title>
<meta tag = "description" content="Index">
<meta tag = "keywords" content ="Home, Spa, Green, Leaf, Day, beauty, Supplies">
<style>
a:hover {
    background-color: yellow;
}
</style>
</head>
<body bgcolor="#66CCFF">
<center>

<font size="30" color="green">Mayos Green Leaf Day Spa</font>

</center>



<!——Navigation Bar Starts here!—->
<hr>
<center>
<h3 style="word-spacing:50px">

<a href src="ContactInformation.html">Contact_Information</a>
<a href src="ProductInformation.html">Product_Information</a>
<a href src="Index.html">Index</a>
</h3>
</center>
<hr>

<!——Navigation Bar Ends here!—->

<br><br>

<center>
<font size="25" color="red">Company Information</font>
</center>
<hr>
<br>

<center>
<font size="4" color="black">
 We started the company back in 2009. We have been in business serving our customers needs ever since!
We started this company noticing the need for a quality spa. Our goal is to serve each customer with dignity, thoughtfulness, and respect. We do this by providing clients privacy during their stay with us. We make sure that our prices are affordable and fair
both to you and our business above all else we insure a positive experience by providing quality customer service. Our clients love us, and to show that we have been in business for 6 years. Our passion for beauty still endures it is after all why we started the spa.
</font>


<hr>
<br><br><br>
 
<!——MouseOver Effect image.——>
<center> 
<img border="0" alt="Spa" src="Hotrocks.png" id="mouseIMG" onmouseover="mouseOver()" onmouseout="mouseOut()" />

 </center>
<!——The function of mouseover is to change a object normally an image into something else or different attributes.—->
<!——Images found using Google images.——>




<br><br><br>

<!——Navigation Bar Starts here!—->
<hr>
<center>
<h3 style="word-spacing:50px">

<a href src="ContactInformation.html">Contact_Information</a>
<a href src="ProductInformation.html">Product_Information</a>
<a href src="Index.html">Index</a>
</h3>
</center>
<hr>

<!——Navigation Bar Ends here!—->

<br><br><br>



<h5><i>2015 John Mayo</i></h5>






</body>
</html>

Answer 1

看到这个fiddle

我已经将你的 <img> 更改如下

<img border="0" alt="Spa" src="http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-300mmf_35-56g_ed_vr/img/sample/sample4_l.jpg" id="mouseIMG" onmouseover="mouseOver(this)" onmouseout="mouseOut(this)" />

我制作的 JS 如下..您可以使用您的脚本本身进行一些小改动..

function mouseOver(x) {
    x.src = "http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-300mmf_35-56g_ed_vr/img/sample/sample4_l.jpg";
}

function mouseOut(x) {
    x.src = "http://res.cloudinary.com/demo/image/upload/sample.jpg";
}

图片鼠标悬停效果

Image mouseover effect

html

javascript-events

看到这个fiddle