how to change a picture using radio button

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

    how to change a picture using radio button

    Code:
    <img src="1.jpg">
<input type="radio" name="r1" value="one">

<img src="2.jpg">
<input type="radio" name="r1" value="two">

<div>
<img src="">
</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?
    Last edited by Rabbit; Mar 13 '15, 04:13 PM. Reason: Please use [code] and [/code] tags when posting code or formatted data.
    Tags: None
    • Dormilich
      Recognized Expert Expert
      • Aug 2008
      • 8694
      #2
      you set an event to the checkboxes and from this event you toggle the image display.

        Comment

        • Exequiel
          Contributor
          • Jul 2012
          • 288
          #3
          Try this code. its a simple coding here.

          Code:
          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Zick Sample</title>
<style>
img{
	border:8px solid rgba(255,255,255,0.8);
	box-shadow:1px 1px 1px 1px rgba(1,1,1,0.3);
	margin:5px;
	}
.img{
	width:300px;
}
.bigimg{
	width:700px;
}
</style>
<script>

function imagechanger(myvalue)
{
	var resultimg = document.getElementById("resultimage");
	resultimg.innerHTML = "";//empty the resultimage div element
	
	var imge = document.createElement("IMG");//create new element image
    imge.setAttribute("src", myvalue);//setting of its attribute src and class
    imge.setAttribute("class", "bigimg");
    resultimg.appendChild(imge);//put the newly created image in resulimage div element id
}
</script>
</head>
<body>

<img src="http://i1.2pcdn.com/node14/image/game/50da9450c01d0e168514075c/50e13d0061fc7025162e958c/20121231022213a0dczsyrom2zmu9j.jpg" class="img">
<input type="radio" name="r1" value="http://i1.2pcdn.com/node14/image/game/50da9450c01d0e168514075c/50e13d0061fc7025162e958c/20121231022213a0dczsyrom2zmu9j.jpg" onchange="imagechanger(this.value)">
 
<img src="http://i.ytimg.com/vi/IEtuDtJHTkg/maxresdefault.jpg" class="img">
<input type="radio" name="r1" value="http://i.ytimg.com/vi/IEtuDtJHTkg/maxresdefault.jpg" onchange="imagechanger(this.value)">
<br>
<div id="resultimage"><!--result of image here--></div>

</body>
</html>

            Comment

            • Exequiel
              Contributor
              • Jul 2012
              • 288
              #4
              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.
              Code:
              <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Zick Sample</title>
<style>
img{
	border:8px solid rgba(255,255,255,0.8);
	box-shadow:1px 1px 1px 1px rgba(1,1,1,0.3);
	margin:5px;
	cursor:pointer;
	}
.img{
	width:300px;
}
.bigimg{
	width:700px;
}
</style>
<script>

function imagechanger(myvalue)
{
	var resultimg = document.getElementById("resultimage");
	resultimg.innerHTML = "";//empty the resultimage div element
	
	var imge = document.createElement("IMG");//create new element image
    imge.setAttribute("src", myvalue);//setting of its attribute src and class
    imge.setAttribute("class", "bigimg");
    resultimg.appendChild(imge);//put the newly created image in resulimage div element id
}
</script>
</head>
<body>

<img src="http://i1.2pcdn.com/node14/image/game/50da9450c01d0e168514075c/50e13d0061fc7025162e958c/20121231022213a0dczsyrom2zmu9j.jpg" class="img" onclick="imagechanger(this.getAttribute('src'))">
<img src="http://i.ytimg.com/vi/IEtuDtJHTkg/maxresdefault.jpg" class="img" onclick="imagechanger(this.getAttribute('src'))">
<br>
<div id="resultimage"><!--result of image here--></div>

</body>
</html>

                Comment

                • Dscript
                  New Member
                  • Mar 2015
                  • 4
                  #5
                  thank you sir for helipng with this

                    Comment

                    • Exequiel
                      Contributor
                      • Jul 2012
                      • 288
                      #6
                      no problem. just enhance the code. :)

                        Comment

                        Previous template Next
                        Working...