Images In Javascript
I am creating a small application where there are multiple images displayed and when user clicks on any one of the images it gets bigger and replaces the image that is in middle.
But I am not getting the clicked image.<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="IM开发者_如何学JAVAG2" 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>
How about this?
<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>
There are some errors in your code, for example:
- The document.write should not be used like this
- You are doing switch/case on non existing variables (img2, img3, img4)
- JavaScript is case sensitive. IMG4 does not equal img4
- return is a statement. If you want to return false, you write
return false; - Each statement should end with a semicolon.
- HTML tag names should be written in lowercase
- this.id is used incorrectly in the swapImage function (shouldn't be there at all)..
- ..but it is correct when used in
IMG2.. - ..but is incorrect in
IMG3andIMG4 - The img tag should not have a "name" attribute
Hope this helps.
img3 and img4 are missing the this.id reference, so the method doesn't know about the image being clicked... is that what you were asking about?
To add to Fabian's answer, in your function your parameter should be id, not this.id, and your switch statement should do the same, like so:
function swapImage(id) {
switch (id) {
// case statements
}
}
I suppose the question is: "Why does this script fail?".
There are several issues with your script:
document.write()is not supposed to be used for logging. It can easily corrupt your page.- You don't set the
IMG1variable. You probably wont something likevar IMG1 = document.getElementById("IMG1");at the start of your script. - The cases in the switch statement have to be string literals. Instead of
case img3:you have to writecase "img3":
Is this what you were trying to do (untested)?
<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>
Please note that is not a good way to do this.
what about this.
<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>
加载中,请稍侯......
精彩评论