As the title explains, I'd like to create a webpage where a user selects an option from a list and an image is shown to the right of that selection.
eg. User selects 'Map of USA' from a drop down list, and on the right the map of the USA displays.
There could be a default image that shows on the right, as a placeholder for where other maps will show. eg. images/default.png then other images in the code would be images/usa.png, images/japan.png etc
User selects:
- Map of USA - map of USA displays
- Map of Japan - map of Japan displays
Thank you in advance.
So far I have this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://ift.tt/mOIMeg">
<html xmlns="http://ift.tt/lH0Osb">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Map Selector</title>
</head>
<body>
<script>
function setCar() {
var img = document.getElementById("image");
img.src = this.value;
return false;
}
document.getElementById("CarList").onchange = setCar;
</script>
<img id="image" src="images/default_Image.png" />
<select id="CarList">
<option value="images/default_Image.png">No Car</option>
<option value="images/1.png">Volvo</option>
<option value="images/2.png">Audi</option>
</select>
</body>
</html>
But the image does not change upon selection of each map name.
Aucun commentaire:
Enregistrer un commentaire