如何更改此確切代碼以對mouseover執行懸停效果？更改懸停圖像
我嘗試了一些其他問題和答案，但我無法真正關注它們。
因此，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>
我修改了代碼，就像它會與它的一些延遲工作..但儘管如此，它不是動畫..
function changeImage(img){
// document.getElementById('bigImage').src=img;
setTimeout(function() {document.getElementById('bigImage').src=img;},1250);
}
用戶友好代碼： – 2016-08-31 09:17:06
<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>
得到它。謝謝！ – 2012-02-22 18:59:13
還是這樣做：
<a href="SSX.html">
<img src="SSX.jpg"
onmouseover="this.src='SSX2.jpg';"
onmouseout="this.src='SSX.jpg';"
height=100
width=120 />
</a>
我覺得這是最簡單的方法。
是的，它的行爲如此 – Asif 2012-02-23 02:47:53
試試這個它了這麼容易和最短的一個，只是改變圖像的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';">
</img>
</a>
真棒！謝謝:) – 2015-05-28 18:20:56
的翻滾圖像或鼠標在圖像的網頁的最簡單方式功能表的
<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>
如果你不想做Javascript，你可以使用CSS和：hover selector來獲得相同的效果。
方法如下：
的index.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中
.change_img { background-image:url('img.png'); }/*Normal Image*/
.change_img:hover { background-image:url('img_hover.png'); }/*On MouseOver*/
沒有所需的JavaScript，如果你使用這種技術
<div class="effect">
<img class="image" src="image.jpg" />
<img class="image hover" src="image-hover.jpg" />
</div>
的，你需要的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;
}
記得給一些類股利和提到它在你的CSS名稱，以避免麻煩:)
現在你也可以使用Sprite CSS技術了，更多詳細信息 – 2013-09-05 13:52:10
下面是一個簡單的代碼示例：
.change_img {
background-image: url(image1.jpg);
}
.change_img:hover {
background-image: url(image2.jpg);
}
只是用這樣的：
例子：
<img src="http://nineplanets.org/planets.jpg"
onmouseover="this.src='http://nineplanets.org/planetorder.JPG';"
onmouseout="this.src='http://nineplanets.org/planets.jpg';">
</img>
最適合與圖片尺寸相同的圖片。
複製此
<img src="IMG-1"
onmouseover="this.src='IMG-2';"
onmouseout="this.src='IMG-1';">
</img>
對不起，我說的是第二圖像 – andrrs 2012-02-22 18:45:28