Javascript將鼠標懸停在鏈接上加載圖像
[英]Javascript loading an image on hover over a link
問題描述
我是Java腳本的新手，正在設計我的網站，但是當用戶將鼠標懸停在家里時，我想在網頁的特定位置加載新圖像，這是代碼。
<html>
<head>
</head>
<body>
<img src="yourImage.jpg" alt="Home" id="image1" onmouseover="image1.src='home.jpg';" onmouseout="image1.src='myImage.jpg';" /> <br />
<a href="#" onmouseover=image1.src='home.jpg';" onmouseout="image1.src='yourImage.jpg';">Hoover Me!</a>
</body>
</html>
該代碼無法正常工作。請幫助我找出代碼中的錯誤。
5 個解決方案
解決方案1
1 2011-11-29 19:26:39
在嘗試操作圖像對象之前，必須使用方法document.getElementById()獲取圖像對象：
<body>
<img src="yourImage.jpg" alt="Home" id="image1" onmouseover="document.getElementById('image1').src='home.jpg';" onmouseout="document.getElementById('image1').src='myImage.jpg';" /> <br />
<a href="#" onmouseover="document.getElementById('image1').src='home.jpg';" onmouseout="document.getElementById('image1').src='yourImage.jpg';">Hoover Me!</a>
</body>
您應該考慮使用JQuery來完成此類工作。
解決方案2
0 2011-11-29 19:26:38
-
image1沒有任何意義。 您將需要使用document.getElementById('image1').src而不是image1.src。 - 您缺少
a標簽的onmouseover屬性的引號。
解決方案3
0 2011-11-29 19:30:30
除了不使用document.getElementById，您還將在鼠標懸停時遇到延遲，除非已預先加載了圖像。
解決方案4
0 已采納 2011-11-29 19:31:14
您不能image1.src img稱為image1.src ，而必須先分配image1=document.getElementById('image1')然后再將其稱為image1.src 。 還有一種更簡單的方法可以做到這一點。 您還可以在JavaScript中將當前圖像或對象稱為this.src 。 請在以下更改中查看更正后的代碼：
<html>
<head>
</head>
<body>
<img src="yourImage.jpg" alt="[ Home ]" id="image1" onmouseover="this.src='home.jpg';" onmouseout="this.src='myImage.jpg';" /><br />
<a href="#" onmouseover="document.getElementById('image1').src='home.jpg';" onmouseout="document.getElementById('image1').src='yourImage.jpg';">Hoover Me!</a>
</body>
</html>
解決方案5
0 2011-11-29 19:32:00
要從其自身的內聯屬性訪問img元素，您需要使用'this'關鍵字：
<img src="yourImage.jpg" alt="Home" id="image1" onmouseover="this.src='yourOtherImage.jpg';" />
除了內聯之外，您還可以使用javascript庫（如jQuery）（如此處所述） ，如果您以后要執行更多操作（例如添加動畫），它將為您提供更大的靈活性，但這取決於您以及您面臨的挑戰感覺像:)
javascript在圖像懸停上添加鏈接>在鏈接懸停時保持鏈接處於活動狀態
[英]javascript add link on image hover > keep link active on link hover
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.