The algorythm is this:
1. Create a function that will perform image change when you select different option from <select>.
It should be something like this (I write this on the fly and didn't tested it so it can require some debugging):
function selectState(state) {
document.images['map'].src = eval(state.name + ".gif"
;
}
2. Add image to your html and name it 'map':
<img src="default.gif" width="" height="" name="map">
3. Add <select> to your html with all states and add onChange event handler:
<form name="states_map">
<select name="states" onChange="selectState(this.options[this.selectedIndex])">
<option name="AS">Alaska
<option name="FL">Florida
. . .
</select>
</form>
4. Create 50 images for highlighted states, name them as as.gif, fl.gif, etc (exactly as you names options in <select>) and add preloaders for them:
if (document.images) {
img1 = new Image();
img1.src = "as.gif"
img2 = new Image();
img2.src = "fl.gif";
. . .
}
So the <head> will contain all this:
<script>
if (document.images) {
img1 = new Image();
img1.src = "as.gif"
. . .
function selectState(state) {
document.images['map'].src = eval(state.name + ".gif"
;
}
</script>
That's all.
Now when you select something from drop-down list the image will change to appropriate one.
Note that you cannot use image maps as there's no possibility to change a part of it. That's why you need a set of images that will replace the default one.
