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 IMG3 and IMG4
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 IMG1 variable. You probably wont something like var 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 write case "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&amp;text=First" alt="img1" onclick="swapImage(this.src)"></li>
      <li><img src="http://placehold.it/100x100&amp;text=Second" alt="img2" onclick="swapImage(this.src)"></li>
      <li><img src="http://placehold.it/100x100&amp;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>

Images In Javascript

精彩评论

关注公众号

热门标签

图文推荐

Images In Javascript

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：