我正在创建一个小应用程序，其中显示多张图片，当用户点击其中一张图片时，它会变大并替换中间的图片。
但是我没有得到点击的图像。
<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>
最佳答案
这个怎么样？
<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)进行 switch/case
- JavaScript 区分大小写。 IMG4 不等于 img4
- return 是一个语句。如果你想返回false，你写
return false; - 每条语句都应以分号结尾。
- HTML 标签名称应以小写形式书写
- this.id 在 swapImage 函数中使用不正确(根本不应该存在)..
- ..但在
IMG2中使用时是正确的.. - ..但在
IMG3和IMG4 中不正确
- img 标签不应该有“name”属性
希望这对您有所帮助。
关于javascript - Javascript 中的图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2118049/