Well, since you're dealing with JavaScript and it's DOM model of organizing and manipulating HTML elements and attributes.... Why use InnerHTML at all???
Each HTML element is represented as an object in javascript, and each attribute of that element is a property (member variable) of that object.
Instead of saying:
some_image.innerHTML = "<img src='...'>";
You should say:
some_image.src = '...';
That's how JavaScript is supposed to work. Also, it makes for a better browsing experience if you preload the images you're going to use, that way, the images are swapped more quickly, without making an additional request to the webserver each time you change the image.
<script language="JavaScript">
function changeImage(newImage)
{
if document['image_name'].src = eval(newImage + ".src");
}
button1 = new Image();
button1.src = "free88.gif";
button2 = new Image();
button2.src = "wobutton.gif";
button3 = new Image();
button3.src = "but3.gif";
-->
</script>
<img name="image_name" src="free88.gif" />
<input type="radio" name="my_radio" value="one" onClick="changeImage('button1');">one</input>
<input type="radio" name="my_radio" value="two" onClick="changeImage('button2');">two</input>
<input type="radio" name="my_radio" value="three" onClick="changeImage('button3');">three</input>
See what's going on? The button onClick events calls the changeImage function with a string parameter. This string is either "button1", "button2", or "button3".
The changeImage function takes this string and appends a ".src" to it, so now our string values are "button1.src", "button2.src", or "button3.src". This string is passed to the eval() function, which evaluates the string as javascript.
If you remember, we created variables named button1, button2, and button3 of the Image object type and set their src property (read: member variable) to the appropriate image sources. The next thing changeImage does is assign the value of the appropriate buttonX image src to the src property of your named image tag (<image name="image_name"...>).
Important note: This works because the image tag is given a NAME attribute, which allows JavaScript to easily look up that element in the document array. If you change the name of the image, remember to make sure that your "changeImage" function changes the src property of the correct image -- that is, make sure your names match.
You can make the changeImage function a little more generic by passing this image name to the function as a second parameter. That way, you can use any number of radio buttons to change any number of images -- you just have PHP generate the correct javascript and HTML code:
<script language="JavaScript">
function changeImage(newImage, imageName)
{
if document[imageName].src = eval(newImage + ".src");
}
// here, you have PHP generate all the appropriate image pre-loading code
button1_a = new Image();
button1_a.src = "free88.gif";
button1_b = new Image();
button1_b.src = "wobutton.gif";
button1_c = new Image();
button1_c.src = "but3.gif";
button2_a = new Image();
button2_a.src = "some_image.jpg";
button2_b = new Image();
button2_b.src = "some_other_image.png";
-->
</script>
<image name="image1" src="free88.gif" />
<input type="radio" name="my_radio" value="one" onClick="changeImage('button1_a', 'image1');">one</input>
<input type="radio" name="my_radio" value="two" onClick="changeImage('button1_b', 'image1');">two</input>
<input type="radio" name="my_radio" value="three" onClick="changeImage('button1_c', 'image1');">three</input>
<image name="image2" src="some_other_image.png" />
<input type="radio" name="radio_b" value="one" onClick="changeImage('button2_a', 'image2');">one</input>
<input type="radio" name="radio_b" value="two" onClick="changeImage('button2_b', 'image2');">two</input>
I hope this makes sense.
Also, keep in mind that I typed all this code directly into this forum quick-reply box, so I haven't tested it or verified that it's completely bug- and typo-free.
Take care,
Nik
http://www.bigaction.org/
Display images according to radio button chosen
