scriptygoddessThe idea here is to display an image based on whether a check box is checked or not. It'll toggle it's display, so you can click it on, click it off, etc.
(And if you post a comment asking me why anyone would ever want this, I will beat you up. LOL! I needed this for an application I was working on at work. I'm sure there are other uses as well… can't think of them at the moment, but that's not my problem.) 😉
This goes in between your <head> </head> tags:
<script language="javascript">
<!–
function toggleImage(imgName, imgOne, blankImg) {
if (document[imgName].src == imgOne) {
document[imgName].src = blankImg;
} else if (document[imgName].src == blankImg) {
document[imgName].src = imgOne;
}
}
//alternatively, you can use this function
//if you're sure you're going to be toggling between the same images
function toggleImage2(imgName) {
if (document[imgName].src == "HTTP://YOURDOMAIN.COM/PATH/TO/IMAGE1.gif") {
document[imgName].src = "HTTP://YOURDOMAIN.COM/PATH/TO/spacer.gif";
} else if (document[imgName].src == "HTTP://YOURDOMAIN.COM/PATH/TO/spacer.gif") {
document[imgName].src = "HTTP://YOURDOMAIN.COM/PATH/TO/IMAGE1.gif";
}
}
//–>
</script>
Now on your page, your checkbox looks like:
<input type="checkbox" name="displayImage" value="displayImage" onClick="toggleImage('thePictureName', 'HTTP://YOURDOMAIN.COM/PATH/TO/IMAGE1.gif', 'HTTP://YOURDOMAIN.COM/PATH/TO/spacer.gif')">
or this (depending on which function you're using:
<input type="checkbox" name="displayImage" value="displayImage" onClick="toggleImage2('thePictureName')">
Then your image is simply set to the default:
