Html 悬停时更改图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9400883/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change image on hover
提问by Johnny Hankgard
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.
我尝试关注其他一些问题和答案，但我无法真正关注它们。
So the HTML is:
所以 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>
Now what I want to do is change the big size image when the mouse hovers over the small images.
现在我想要做的是当鼠标悬停在小图像上时更改大尺寸图像。
采纳答案by Sarin J S
Try the following code. It's working
试试下面的代码。它正在工作
<!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);
}
回答by zak
Try this it`s so easy and the shortest one, just change the Image's URL:
试试这个，它是如此简单和最短，只需更改图像的 URL：
<a href="TARGET URL GOES HERE">
<img src="URL OF FIRST IMAGE GOES HERE"
onmouseover="this.src='URL OF SECOND IMAGE GOES HERE';"
onmouseout="this.src='URL OF FIRST IMAGE GOES HERE';">
</a>
回答by Asif
Or do like this:
或者这样做：
<a href="SSX.html">
<img src="SSX.jpg"
onmouseover="this.src='SSX2.jpg';"
onmouseout="this.src='SSX.jpg';"
height=100
width=120 />
</a>
I think this is the easiest way.
我认为这是最简单的方法。
回答by Nizam Kazi
No JavaScript needed if you are using this technique
如果您使用此技术，则不需要 JavaScript
<div class="effect">
<img class="image" src="image.jpg" />
<img class="image hover" src="image-hover.jpg" />
</div>
the you will need css to control it
你将需要 css 来控制它
.effect img.image{
/*type your css here which you want to use for both*/
}
.effect:hover img.image{
display:none;
}
.effect img.hover{
display:none;
}
.effect:hover img.hover{
display:block;
}
remember to give some class to div and mention it in your css name to avoid trouble :)
记得给 div 一些类并在你的 css 名称中提及它以避免麻烦:)
回答by Darvin
The easiest way for Roll Over image or Mouse Over image for web pages menus
用于网页菜单的翻转图像或鼠标悬停图像的最简单方法
<a href="#" onmouseover="document.myimage1.src='images/ipt_home2.png';"
onmouseout="document.myimage1.src='images/ipt_home1.png';">
<img src="images/ipt_home1.png" name="myimage1" />
</a>
回答by Karl
If you don't want to do Javascript you can use CSS and :hover selector to get the same effect.
如果你不想做 Javascript，你可以使用 CSS 和 :hover 选择器来获得相同的效果。
Here's how:
就是这样：
index.html:
索引.html：
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<title>Image hover example</title>
</head>
<body>
<div class="change_img"></div>
</body>
</html>
stylesheet.css
样式表.css
.change_img { background-image:url('img.png'); }/*Normal Image*/
.change_img:hover { background-image:url('img_hover.png'); }/*On MouseOver*/
回答by andrrs
<script type="text/javascript">
function changeImage(img){
img.src=URL_TO_NEW_IMAGE;
}
</script>
<a href="RR.html"><img id="bigImage"
onmouseover="changeImage(document.getElementById('bigImage'));"
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>
回答by Vikshay
Just Use this:
只需使用这个：
Example:
例子：
<img src="http://nineplanets.org/planets.jpg"
onmouseover="this.src='http://nineplanets.org/planetorder.JPG';"
onmouseout="this.src='http://nineplanets.org/planets.jpg';">
</img>
Works best with the Pictures being the same size.
图片大小相同时效果最佳。
Copy This
复制这个
<img src="IMG-1"
onmouseover="this.src='IMG-2';"
onmouseout="this.src='IMG-1';">
</img>
回答by user2851286
Here is a simplified code sample:
这是一个简化的代码示例：
.change_img {
background-image: url(image1.jpg);
}
.change_img:hover {
background-image: url(image2.jpg);
}
