checkbox to call images

goldie · 11-09-2012, 05:17 PM

My knowledge of JavaScript is very limited but hopefully not for long. HTML and CSS I do have some know how.
I have created a form; specifically a checkbox and when the checkbox is ticked I have an image that is displayed. My question is this – Is it possible to have more than one image display when one checkbox has been clicked? I would like to have 10-20 images display when one checkbox has been ticked. Any direction on this would be much appreciated.
TIA

xelawho · 11-09-2012, 05:34 PM

are they always the same images? if so, just put them all into a hidden div and show/hide it depending on what happens with the checkbox

Code:

<html>
<head>
<style>
#picsdiv{
display:none;
}
</style>
</head>
<body>
<input type="checkbox" id="mycb" onclick="showHide(this)"/>
<div id="picsdiv">put your images here</div>
<script type="text/javascript">
function showHide(box){
document.getElementById("picsdiv").style.display=box.checked?"block":"none";
}
</script>
</body>
</html>

goldie · 11-09-2012, 06:41 PM

Quote:

Originally Posted by xelawho

are they always the same images? if so, just put them all into a hidden div and show/hide it depending on what happens with the checkbox

Code:

<html>
<head>
<style>
#picsdiv{
display:none;
}
</style>
</head>
<body>
<input type="checkbox" id="mycb" onclick="showHide(this)"/>
<div id="picsdiv">put your images here</div>
<script type="text/javascript">
function showHide(box){
document.getElementById("picsdiv").style.display=box.checked?"block":"none";
}
</script>
</body>
</html>

Yes they would all be the same image but eventually I would like to add a rollover or onclick event to each image. Would this still work?

ex: I would like one checkbox that when ticked would display 10 images which would all be the same image but when a user rollsover or clicks each image a text box would display with addtional info, which would be different for each image.

Hope I am explaining this clearly