- <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?
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. - <!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>
5  1541 
you set an event to the checkboxes and from this event you toggle the image display.
Try this code. its a simple coding here. - <!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>
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. - <!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>
thank you sir for helipng with this
no problem. just enhance the code. :)
Sign in to post your reply or Sign up for a free account.
Similar topics
by: Don Grover |
last post by:
I have a table thats wrapped in a div tag, that when user selects 1 of 2
radio buttons it hides or shows table, this works ok.
But I want to set the table show hide on what the existing state of...
|
by: KatB |
last post by:
I'm creating an asp.net page using VS.NET.
TOPIC1
Radio button list
TOPIC2
Radio button list
etc.
|
by: Bob Alston |
last post by:
I have an application with several forms. Most forms use radio boxes
for Yes/No choices. On a few of these, once one option is selected, the
user cannot change the selection without moving to...
|
by: shror |
last post by:
Hi every body, i want to know how i can use two radio buttons to turn
on/off a midi file on my webpage, so that if the midi is running and i
choose the off radio button then the midi is switched...
|
by: Milsnips |
last post by:
hi there,
i have a repeater which returns me a list of addresses in each repeaterItem
row.
at the end of each row i have a radiobutton, which i want the user to select
the "active" address.
...
|
by: cloh |
last post by:
Hi all,
Does anyone know if it is possible to change the color of a radio button in a form? Changing either the color of the border or the dot would work for me - I just need it to stand out from...
|
by: hellogohel |
last post by:
hi all,
how do i display in detailview that is selected from gridview radiobutton?
coding dynamically
thanks in advance
|
by: dangerouskicker |
last post by:
dear friends
any one can guide me or help, How i can change checkbox and radio button color change with java script
regards
devang
|
by: rjlorenzo |
last post by:
Good Day,
I just need help on my programming. I would like to try to retrieved/edit the data i've save using radio button and want it to displayed on radio button for editing or changing the...
|
by: imtiyazrdl |
last post by:
Hi
I need customer can select delivery day name (Saturday and thus day ) using radio button and radio button is value store in order table or any new table and also mansion this day value in order...
|
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM).
In this session, we are pleased to welcome former...
|
by: ryjfgjl |
last post by:
In our work, we often need to import Excel data into databases (such as MySQL, SQL Server, Oracle) for data analysis and processing. Usually, we use database tools like Navicat or the Excel import...
|
by: taylorcarr |
last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
|
by: aa123db |
last post by:
Variable and constants
Use var or let for variables and const fror constants.
Var foo ='bar';
Let foo ='bar';const baz ='bar';
Functions
function $name$ ($parameters$) {
}
...
|
by: ryjfgjl |
last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
|
by: emmanuelkatto |
last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud.
Please let me know.
Thanks!
Emmanuel
|
by: BarryA |
last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
|
by: Sonnysonu |
last post by:
This is the data of csv file
1 2 3
1 2 3
1 2 3
1 2 3
2 3
2 3
3
the lengths should be different i have to store the data by column-wise with in the specific length.
suppose the i have to...
|
by: Hystou |
last post by:
There are some requirements for setting up RAID:
1. The motherboard and BIOS support RAID configuration.
2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
| |
