Javascript中的圖像
[英]Images In Javascript
問題描述
我正在創建一個小型應用程序，其中顯示了多個圖像，並且當用戶單擊任何一個圖像時，它都會變大並替換中間的圖像。
但是我沒有得到點擊的圖像。
<HTML>
<HEAD>
<SCRIPT LANGUAGE="text/javascript">
function swapImage(this.id) {
document.write("In SwapImage");
switch (this.id) {
case img2:
IMG1.src = "component1/images/image1.jpg"
intImage = 2
return(false);
case img3:
IMG1.src = "component1/images/image1.jpg"
intImage = 2
return(false);
case img4:
IMG1.src = "component1/images/image1.jpg"
intImage = 2
return(false);
}
}
</SCRIPT>
</HEAD>
<BODY>
<IMG id="IMG1" name="IMG1" src="image1.jpg" height="100px" width="100px">
<IMG id="IMG2" name="IMG2" height="40px" width="40px" src="image1.jpg" onclick="swapImage(this.id);">
<IMG id="IMG3" name="IMG3" height="40px" width="40px" src="image2.jpg" onclick="swapImage();">
<a href="#">
<IMG id="IMG4" name="IMG4" height="40px" width="40px" src="image1.jpg" onclick="swapImage();">
</a>
</BODY>
</HTML>
6 個解決方案
解決方案1
1 2010-01-22 14:57:33
img3和img4缺少this.id參考，因此該方法不知道所單擊的圖像是您要問的嗎？
解決方案2
1 2010-01-22 15:09:38
要添加到Fabian的答案中，在函數中，您的參數應為id ，而不是this.id ，並且switch語句應執行相同的操作，如下所示：
function swapImage(id) {
switch (id) {
// case statements
}
}
解決方案3
1 已采納 2010-01-22 17:02:20
這個怎么樣？
<HTML>
<HEAD>
<SCRIPT LANGUAGE="javascript">
function swapImage(src) {
document.getElementById("IMG1").src = src;
}
</SCRIPT>
</HEAD>
<BODY>
<IMG id="IMG1" src="image1.jpg" height="100px" width="100px">
<IMG id="IMG2" height="40px" width="40px" src="image1.jpg" onclick="swapImage(this.src);">
<IMG id="IMG3" height="40px" width="40px" src="image2.jpg" onclick="swapImage(this.src);">
<IMG id="IMG4" height="40px" width="40px" src="image1.jpg" onclick="swapImage(this.src);">
</BODY>
</HTML>
您的代碼中有一些錯誤，例如：
- document.write不應這樣使用
- 您正在對不存在的變量（img2，img3，img4）進行切換/轉換
- JavaScript區分大小寫。 IMG4不等於img4
- return是一個聲明。 如果要返回false，則編寫
return false; - 每個語句應以分號結尾。
- HTML標記名稱應小寫
- 在swapImage函數中錯誤地使用了this.id（根本不應該存在）。
- ..但是在
IMG2使用時是正確的。 -
IMG3但是在IMG3和IMG4不正確 - img標簽不應具有“名稱”屬性
希望這可以幫助。
解決方案4
0 2013-03-03 07:37:34
那這個呢。
<style>
ul li{
float: left;
margin:10px;
list-style: none;
}
</style>
<div><img src="http://placehold.it/300x200" alt="" id="zoomImg" height="200" width="300" /></div>
<ul>
<li><img src="http://placehold.it/100x100&text=First" alt="img1" onclick="swapImage(this.src)"></li>
<li><img src="http://placehold.it/100x100&text=Second" alt="img2" onclick="swapImage(this.src)"></li>
<li><img src="http://placehold.it/100x100&text=Third" alt="img3" onclick="swapImage(this.src)"></li>
</ul>
<script type="text/javascript">
function swapImage(src){
var zoomImg = document.getElementById('zoomImg');
zoomImg.src = src;
}
</script>
解決方案5
0 2010-01-22 15:05:08
我想問題是：“為什么這個腳本失敗？”。
您的腳本有幾個問題：
-
document.write()不應用於日志記錄。 它很容易破壞您的頁面。 - 您沒有設置
IMG1變量。 您可能不會喜歡var IMG1 = document.getElementById("IMG1");在腳本的開頭。 - switch語句中的大小寫必須為字符串文字。 代替
case img3:您必須編寫case "img3":
解決方案6
0 2010-01-22 15:09:35
這是您想要做的（未經測試的）嗎？
<html>
<head>
<script type="text/javascript">
var swapImage = function() {
var IMG1=document.getElementById("img1");
return function(){
switch (this.id) {
case "img2":
IMG1.src = "component1/images/image2.jpg";
intImage = 2;
break;
case "img3":
IMG1.src = "component1/images/image3.jpg";
intImage = 2;
break;
case "img4":
IMG1.src = "component1/images/image4.jpg";
intImage = 2;
break;
default:
break;
}
return false;
}
};
</script>
</head>
<body>
<IMG id="img1" height="100px" width="100px" src="image1.jpg">
<IMG id="img2" height="40px" width="40px" src="image2.jpg" onclick="swapImage();">
<IMG id="img3" height="40px" width="40px" src="image3.jpg" onclick="swapImage();">
<IMG id="img4" height="40px" width="40px" src="image4.jpg" onclick="swapImage();">
</body>
</html>
請注意，這不是執行此操作的好方法。
JavaScript圖片
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.