Check boxes that select images

Creating a visual menu

[riotfire]

I am trying to figure out a way to create a page that the user can select check boxes that will display diffent images in a frame or different part of the page.

In other words, a check box would be selected and an image would appear. If the selected a different radio button in the group the image would be replaced.

Confused? Its hard to explain

[whoisgregg]

Sorry for the late response, I was looking for the very answer to the question you pose and ran across your unanswered post. (You've certainly figured this out by now, but in case someone else down the road comes looking now there will be one answer here.) Here's one way that works:

Here's the javascript, put it in the head:

function toggle(obj){
var theimageID = obj.id + 'IMG' ;
if(obj.checked){
document.getElementById(theimageID).style.display = "inline";
}else{
document.getElementById(theimageID).style.display = "none";
}}

Define your images and checkboxes like so (be sure to add the form tags):

<input type="checkbox" id="pepperoni" onClick="toggle(this);">pepperoni<br />
<input type="checkbox" id="mushroom" onClick="toggle(this);">mushroom<br />

<img id="pepperoniIMG" src="pepperoni.gif" style="display:none;">
<img id="mushroomIMG" src="mushroom.gif" style="display:none;">

You should now have pizza ingredient checkboxes that cause little images of the ingredient to appear. ;)

[whoisgregg]

Or, instead of toggling css display attributes, you could use innerHTML writes and empty DIV's to accomplish the same thing. There's plenty of examples for that sort of thing in the Javascript forum [webmasterworld.com]. :)