how to display a picture when i click on thumbnail

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Dscript
    New Member
    • Mar 2015
    • 4
    #1

    how to display a picture when i click on thumbnail

    Code:
    <html>
    <head>
    <script>
     
    function imagechanger(myvalue)
    {
        var resultimg = document.getElementById("resultimage");
        var imgsrc=document.getElementById("myvalue").src;
        resultimg.src=imgsrc;
    }
    </script>
    </head>
    <body>
     
    <img src="1.jpg" id="img1" onclick="imagechanger(img1)" width=100 height=100>
    <img src="2.png" id="img2" onclick="imagechanger(img2)" width=100 height=100>
    <br>
    
    <!--reasult image-->
    <img src="" id="resultimage" width=200 height=200>
     
    </body>
 </html>
    i want the picture i click to be displayed in the "reasult image" area
    i dont understand why this doesn't work.please correct this code.
    thank you!
    Tags: None
    • Dormilich
      Recognized Expert Expert
      • Aug 2008
      • 8694
      #2
      you have no element with the Id "myvalue" (as specified on line #8)

      on line #15/#16 you pass in a variable you never define.

        Comment

        • Dscript
          New Member
          • Mar 2015
          • 4
          #3
          function imagechanger(my value)
          this "myvalue" catch a value that img send as a parameter. why can't i use that myvalue insted the name of the ID

            Comment

            • Dormilich
              Recognized Expert Expert
              • Aug 2008
              • 8694
              #4
              "myvalue" is not the same as myvalue

                Comment

                • Luuk
                  Recognized Expert Top Contributor
                  • Mar 2012
                  • 1043
                  #5
                  Tip, try addind a line between 6 and 7 that read
                  Code:
                  alert('function:'+myvalue);
                  and change line 15 to:
                  Code:
                  <img src="1.jpg" id="img1" onclick="alert('parameter:'+this.id); imagechanger(img1)" width=100 height=100>
                  after this click on the 1st picture, and see the difference....

                    Comment

                    • Exequiel
                      Contributor
                      • Jul 2012
                      • 288
                      #6
                      Try to modify your code with this one.
                      Code:
                      <html>
    <head>
    <script>
 
    function imagechanger(myvalue)
    {
        var resultimg = document.getElementById("resultimage");
        resultimg.src=myvalue;
    }
    </script>
    </head>
    <body>
 
    <img src="http://i1.2pcdn.com/node14/image/game/50da9450c01d0e168514075c/50e13d0061fc7025162e958c/20121231022213a0dczsyrom2zmu9j.jpg" id="img1" onclick="imagechanger(this.getAttribute('src'))" width=100 height=100>
    <img src="http://i.ytimg.com/vi/IEtuDtJHTkg/maxresdefault.jpg" id="img2" onclick="imagechanger(this.getAttribute('src'))" width=100 height=100>
    <br>
 
    <!--reasult image-->
    <img src="" id="resultimage" width=200 height=200>
 
    </body>
 </html>
                      Here we used onclick="imagec hanger(this.get Attribute('src' ))" in our thumbnail to get directly the src of an image.

                        Comment

                        • Dormilich
                          Recognized Expert Expert
                          • Aug 2008
                          • 8694
                          #7
                          or onclick="imagec hanger(this.src ))"

                            Comment

                            Previous template Next
                            Working...