悬停时更改图片 [英] Change image on hover
本文介绍了悬停时更改图片的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
如何更改此确切的代码，以便在鼠标悬停时执行悬停效果？
How can I change this exact code to do the hovering effect on mouseover?
我尝试了一些其他问题和答案，但我不能真正跟随
I tried following some of the other questions and answers, but I could not really follow them.
所以HTML是：
<a href="RR.html"><img src="R3.jpg" width=700 height=300 /></a>
<div>
<a href="SSX.html"><img src="SSX.jpg" height=100 width=120 /></a>
<a href="MPreview.html"><img src="MaxPayne3Cover.jpg" height=100 width=120 /></a>
<a href="NC.html"><img src="NC.jpg" height=100 width=120 /></a>
</br>
</div>
现在，我想做的是当鼠标悬停在
推荐答案
请尝试以下代码。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title><br />
</head>
<body>
<p>
<script type="text/javascript" language="javascript">
function changeImage(img){
document.getElementById('bigImage').src=img;
}
</script>
<img src="../Pictures/lightcircle.png" alt="" width="284" height="156" id="bigImage" />
<p> </p>
<div>
<p>
<img src="../Pictures/lightcircle2.png" height=79 width=78 onmouseover="changeImage('../Pictures/lightcircle2.png')"/>
</p>
<p><img src="../Pictures/lightcircle.png" alt="" width="120" height="100" onmouseover="changeImage('../Pictures/lightcircle.png')"/></p>
<p><img src="../Pictures/lightcircle2.png" alt="" width="78" height="79" onmouseover="changeImage('../Pictures/lightcircle2.png')"/></p>
<p> </p>
</br>
</div>
</body>
</html>
我修改了代码，就像它会工作一些延迟。不是动画。
I modified the code, like it will work with some delay in it.. But still, it is not animating..
function changeImage(img){
// document.getElementById('bigImage').src=img;
setTimeout(function() {document.getElementById('bigImage').src=img;},1250);
}
这篇关于悬停时更改图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
