Javascript鼠標懸停圖像故障
[英]Javascript mouseover image failure
問題描述
到目前為止，這就是我所看到的，我已經看了很多Java腳本視頻，並且感覺很扎實，但是仍然無法正常運行。
不僅如此，它在Mousover上從logo1變為logo2。 這是功課。 但是，作業對我很重要，因此任何幫助或指導都將不勝感激。
</head>
<body>
<p>
<div>
<script type="text/javascript">
// Pre load images for rollover
function imgOver(id)
{
document.getElementById(id).src="logo1.jpg";
}
function imgOut(id)
{
document.getElementById(id).src="logo2.jpg";
}
</script>
<a href="#" onmouseover="imgOver('logo1');" onmouseout="imgOut('logo2')">
<img alt="logo" height="150" src="images/Logo1.jpeg" width="110" />
</a>
</div>
</body>
</html>
新代碼，仍然沒有...！ =（
</head>
<body>
<div>
<p>
<script type="text/javascript">
// Pre load images for rollover
function imgOver()
{
document.getElementById('logo').src="images/logo1.jpg"; // ensure correct image path
}
function imgOut()
{
document.getElementById('logo').src="images/logo2.jpg"; // ensure correct image path
}
</script>
<a href="#" onmouseover="imgOver('logo1');" onmouseout="imgOut('logo2')">
<img alt="logo" height="150" src="images/Logo1.jpeg" width="110" />
</a>
</p>
</div>
</body>
</html>
2 個解決方案
解決方案1
2 2012-11-04 05:03:22
嘗試這個：
<script type="text/javascript">
// Pre load images for rollover
function imgSwap(imgSrc)
{
document.getElementById('logo').src = "images/"+imgSrc+".jpeg";
}
</script>
<a href="#" onmouseover="imgSwap('Logo1');" onmouseout="imgSwap('Logo2')">
<img id="logo" alt="logo" height="150" src="images/Logo1.jpeg" width="110" />
</a>
以前，您要傳遞一個未使用的id 。 此外，src需要指向images/目錄。
解決方案2
1 已采納 2012-11-04 05:02:52
您無需將圖像元素的ID傳遞給imgOver和imgOut函數，因為該ID從未更改，您的函數應更改為：
function imgOver() {
document.getElementById('logo').src="logo1.jpg"; // ensure correct image path
}
function imgOut() {
document.getElementById('logo').src="logo2.jpg"; // ensure correct image path
}
其次，確保您指定了logo1.jpg和logo2.jpg的正確路徑。 例如：形成原始HTML，看起來您將需要分別使用images / logo1.jpg和images / logo2.jpg 。
您的圖片元素需要有一個ID。 <img id="logo" alt="logo" height="150" src="images/Logo1.jpeg" width="110" />
完整資料：
<script type="text/javascript">
function imgOver() {
document.getElementById('logo').src="images/logo1.jpg"; // ensure correct image path
}
function imgOut() {
document.getElementById('logo').src="images/logo2.jpg"; // ensure correct image path
}
</script>
<a href="#" onmouseover="imgOver()" onmouseout="imgOut()">
<!-- note the id="logo" part below -->
<img id="logo" alt="logo" height="150" src="images/Logo1.jpeg" width="110" />
</a>
帶有圖像的Javascript鼠標懸停
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.