View Full Version : onChange

07-06-2006, 03:55 PM
Alright. I want to make an onchange image thing; where someone can select a name from a form and it will display an image.

I want the form to have two options.

They can pick a MALE or FEMALE version (these two things in one box)
and below it, they can pick different PET versions of it.


1st box: male, female
2nd box: pet one, pet two, pet three, etc

07-06-2006, 04:38 PM
Search for "javascript image rollovers", that will show you how to do it with onmouseover and onmouseout events.

Then, you can change the script, remove the onmouseout/rollout portion, and wire up the image changing to onchange on the select boxes.

Try some stuff out, then post your code with some targetted questions.

07-06-2006, 05:02 PM
I think this is what your after

<!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">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Pet Chooser</title>
<script type="text/javascript">
// <![CDATA[ //
function swapImage(){
var gen = document.forms[0].gender.options[document.forms[0].gender.selectedIndex].value;
var pet = document.forms[0].pet.options[document.forms[0].pet.selectedIndex].value;

if(gen == "none" || pet == "none"){
return false;
var tar = document.getElementById("image_container");
var imgs = tar.getElementsByTagName("IMG");

if(imgs.length > 0){
imgs[0].src = "images/" + gen + "_" + pet + ".jpg";
var newImage = document.createElement("IMG");
newImage.setAttribute("src", "images/" + gen + "_" + pet + ".jpg");
// ]]> //

Gender : <br />
<select name="gender" onchange="swapImage()">
<option value="none">Choose Gender</option>
<option value="male">Male</option>
<option value="female">Female</option>
</select><br />
Pet : <br />
<select name="pet" onchange="swapImage()">
<option value="none">Choose Pet</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
<div id="image_container"></div>

Click HERE (http://www.e-bookworm-online.co.uk/pet_chooser/) to see it working

You will need to name your images 'male_dog.jpg', female_cat.jpg' etc. etc.... and store them in an images folder.

07-06-2006, 06:37 PM
Thanks! That is what exactly what I was looking for.