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

how to change a picture using radio button

P: 4
Expand|Select|Wrap|Line Numbers
  1. <img src="1.jpg">
  2. <input type="radio" name="r1" value="one">
  3.  
  4. <img src="2.jpg">
  5. <input type="radio" name="r1" value="two">
  6.  
  7. <div>
  8. <img src="">
  9. </div>
i want the picture to be changed in side the <div> to the specific image
if i click "one" radio button, 1.jpg should be displayed like wise if i click "two" radio button, 2.jpg should be displayed..

how can i do this?
Mar 13 '15 #1

✓ answered by Exequiel

but you can also change the image result without using radio button, you can directly use the images to view it in a big mode.
try this.
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Zick Sample</title>
  6. <style>
  7. img{
  8.     border:8px solid rgba(255,255,255,0.8);
  9.     box-shadow:1px 1px 1px 1px rgba(1,1,1,0.3);
  10.     margin:5px;
  11.     cursor:pointer;
  12.     }
  13. .img{
  14.     width:300px;
  15. }
  16. .bigimg{
  17.     width:700px;
  18. }
  19. </style>
  20. <script>
  21.  
  22. function imagechanger(myvalue)
  23. {
  24.     var resultimg = document.getElementById("resultimage");
  25.     resultimg.innerHTML = "";//empty the resultimage div element
  26.  
  27.     var imge = document.createElement("IMG");//create new element image
  28.     imge.setAttribute("src", myvalue);//setting of its attribute src and class
  29.     imge.setAttribute("class", "bigimg");
  30.     resultimg.appendChild(imge);//put the newly created image in resulimage div element id
  31. }
  32. </script>
  33. </head>
  34. <body>
  35.  
  36. <img src="http://i1.2pcdn.com/node14/image/game/50da9450c01d0e168514075c/50e13d0061fc7025162e958c/20121231022213a0dczsyrom2zmu9j.jpg" class="img" onclick="imagechanger(this.getAttribute('src'))">
  37. <img src="http://i.ytimg.com/vi/IEtuDtJHTkg/maxresdefault.jpg" class="img" onclick="imagechanger(this.getAttribute('src'))">
  38. <br>
  39. <div id="resultimage"><!--result of image here--></div>
  40.  
  41. </body>
  42. </html>

Share this Question
Share on Google+
5 Replies


Dormilich
Expert Mod 5K+
P: 8,639
you set an event to the checkboxes and from this event you toggle the image display.
Mar 13 '15 #2

Exequiel
100+
P: 287
Try this code. its a simple coding here.

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Zick Sample</title>
  6. <style>
  7. img{
  8.     border:8px solid rgba(255,255,255,0.8);
  9.     box-shadow:1px 1px 1px 1px rgba(1,1,1,0.3);
  10.     margin:5px;
  11.     }
  12. .img{
  13.     width:300px;
  14. }
  15. .bigimg{
  16.     width:700px;
  17. }
  18. </style>
  19. <script>
  20.  
  21. function imagechanger(myvalue)
  22. {
  23.     var resultimg = document.getElementById("resultimage");
  24.     resultimg.innerHTML = "";//empty the resultimage div element
  25.  
  26.     var imge = document.createElement("IMG");//create new element image
  27.     imge.setAttribute("src", myvalue);//setting of its attribute src and class
  28.     imge.setAttribute("class", "bigimg");
  29.     resultimg.appendChild(imge);//put the newly created image in resulimage div element id
  30. }
  31. </script>
  32. </head>
  33. <body>
  34.  
  35. <img src="http://i1.2pcdn.com/node14/image/game/50da9450c01d0e168514075c/50e13d0061fc7025162e958c/20121231022213a0dczsyrom2zmu9j.jpg" class="img">
  36. <input type="radio" name="r1" value="http://i1.2pcdn.com/node14/image/game/50da9450c01d0e168514075c/50e13d0061fc7025162e958c/20121231022213a0dczsyrom2zmu9j.jpg" onchange="imagechanger(this.value)">
  37.  
  38. <img src="http://i.ytimg.com/vi/IEtuDtJHTkg/maxresdefault.jpg" class="img">
  39. <input type="radio" name="r1" value="http://i.ytimg.com/vi/IEtuDtJHTkg/maxresdefault.jpg" onchange="imagechanger(this.value)">
  40. <br>
  41. <div id="resultimage"><!--result of image here--></div>
  42.  
  43. </body>
  44. </html>
Mar 13 '15 #3

Exequiel
100+
P: 287
but you can also change the image result without using radio button, you can directly use the images to view it in a big mode.
try this.
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Zick Sample</title>
  6. <style>
  7. img{
  8.     border:8px solid rgba(255,255,255,0.8);
  9.     box-shadow:1px 1px 1px 1px rgba(1,1,1,0.3);
  10.     margin:5px;
  11.     cursor:pointer;
  12.     }
  13. .img{
  14.     width:300px;
  15. }
  16. .bigimg{
  17.     width:700px;
  18. }
  19. </style>
  20. <script>
  21.  
  22. function imagechanger(myvalue)
  23. {
  24.     var resultimg = document.getElementById("resultimage");
  25.     resultimg.innerHTML = "";//empty the resultimage div element
  26.  
  27.     var imge = document.createElement("IMG");//create new element image
  28.     imge.setAttribute("src", myvalue);//setting of its attribute src and class
  29.     imge.setAttribute("class", "bigimg");
  30.     resultimg.appendChild(imge);//put the newly created image in resulimage div element id
  31. }
  32. </script>
  33. </head>
  34. <body>
  35.  
  36. <img src="http://i1.2pcdn.com/node14/image/game/50da9450c01d0e168514075c/50e13d0061fc7025162e958c/20121231022213a0dczsyrom2zmu9j.jpg" class="img" onclick="imagechanger(this.getAttribute('src'))">
  37. <img src="http://i.ytimg.com/vi/IEtuDtJHTkg/maxresdefault.jpg" class="img" onclick="imagechanger(this.getAttribute('src'))">
  38. <br>
  39. <div id="resultimage"><!--result of image here--></div>
  40.  
  41. </body>
  42. </html>
Mar 13 '15 #4

P: 4
thank you sir for helipng with this
Mar 14 '15 #5

Exequiel
100+
P: 287
no problem. just enhance the code. :)
Mar 14 '15 #6

Post your reply

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