By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,191 Members | 1,067 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,191 IT Pros & Developers. It's quick & easy.

how to display a picture when i click on thumbnail

P: 4
Expand|Select|Wrap|Line Numbers
  1. <html>
  2.     <head>
  3.     <script>
  4.  
  5.     function imagechanger(myvalue)
  6.     {
  7.         var resultimg = document.getElementById("resultimage");
  8.         var imgsrc=document.getElementById("myvalue").src;
  9.         resultimg.src=imgsrc;
  10.     }
  11.     </script>
  12.     </head>
  13.     <body>
  14.  
  15.     <img src="1.jpg" id="img1" onclick="imagechanger(img1)" width=100 height=100>
  16.     <img src="2.png" id="img2" onclick="imagechanger(img2)" width=100 height=100>
  17.     <br>
  18.  
  19.     <!--reasult image-->
  20.     <img src="" id="resultimage" width=200 height=200>
  21.  
  22.     </body>
  23.  </html>
  24.  
  25.  
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!
Mar 14 '15 #1

✓ answered by Exequiel

Try to modify your code with this one.
Expand|Select|Wrap|Line Numbers
  1. <html>
  2.     <head>
  3.     <script>
  4.  
  5.     function imagechanger(myvalue)
  6.     {
  7.         var resultimg = document.getElementById("resultimage");
  8.         resultimg.src=myvalue;
  9.     }
  10.     </script>
  11.     </head>
  12.     <body>
  13.  
  14.     <img src="http://i1.2pcdn.com/node14/image/game/50da9450c01d0e168514075c/50e13d0061fc7025162e958c/20121231022213a0dczsyrom2zmu9j.jpg" id="img1" onclick="imagechanger(this.getAttribute('src'))" width=100 height=100>
  15.     <img src="http://i.ytimg.com/vi/IEtuDtJHTkg/maxresdefault.jpg" id="img2" onclick="imagechanger(this.getAttribute('src'))" width=100 height=100>
  16.     <br>
  17.  
  18.     <!--reasult image-->
  19.     <img src="" id="resultimage" width=200 height=200>
  20.  
  21.     </body>
  22.  </html>
Here we used onclick="imagechanger(this.getAttribute('src'))" in our thumbnail to get directly the src of an image.

Share this Question
Share on Google+
6 Replies


Dormilich
Expert Mod 5K+
P: 8,639
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.
Mar 14 '15 #2

P: 4
function imagechanger(myvalue)
this "myvalue" catch a value that img send as a parameter. why can't i use that myvalue insted the name of the ID
Mar 14 '15 #3

Dormilich
Expert Mod 5K+
P: 8,639
"myvalue" is not the same as myvalue
Mar 14 '15 #4

Expert 100+
P: 1,035
Tip, try addind a line between 6 and 7 that read
Expand|Select|Wrap|Line Numbers
  1. alert('function:'+myvalue);
and change line 15 to:
Expand|Select|Wrap|Line Numbers
  1. <img src="1.jpg" id="img1" onclick="alert('parameter:'+this.id); imagechanger(img1)" width=100 height=100>
  2.  
after this click on the 1st picture, and see the difference....
Mar 14 '15 #5

Exequiel
100+
P: 287
Try to modify your code with this one.
Expand|Select|Wrap|Line Numbers
  1. <html>
  2.     <head>
  3.     <script>
  4.  
  5.     function imagechanger(myvalue)
  6.     {
  7.         var resultimg = document.getElementById("resultimage");
  8.         resultimg.src=myvalue;
  9.     }
  10.     </script>
  11.     </head>
  12.     <body>
  13.  
  14.     <img src="http://i1.2pcdn.com/node14/image/game/50da9450c01d0e168514075c/50e13d0061fc7025162e958c/20121231022213a0dczsyrom2zmu9j.jpg" id="img1" onclick="imagechanger(this.getAttribute('src'))" width=100 height=100>
  15.     <img src="http://i.ytimg.com/vi/IEtuDtJHTkg/maxresdefault.jpg" id="img2" onclick="imagechanger(this.getAttribute('src'))" width=100 height=100>
  16.     <br>
  17.  
  18.     <!--reasult image-->
  19.     <img src="" id="resultimage" width=200 height=200>
  20.  
  21.     </body>
  22.  </html>
Here we used onclick="imagechanger(this.getAttribute('src'))" in our thumbnail to get directly the src of an image.
Mar 15 '15 #6

Dormilich
Expert Mod 5K+
P: 8,639
or onclick="imagechanger(this.src))"
Mar 16 '15 #7

Post your reply

Sign in to post your reply or Sign up for a free account.