change img src using select

Question

I'm using the select form to navigate around a page.

<form name="form">
  <select name="menu1"  onChange="MM_jumpMenu('parent',this,1)">
<option value="#" selected>SELECT</option> 
<option value="#a">location A</option>
<option value="#b">location B</option> 
</form>

I'd like the select form to have the added functionality of changing image src. Something like:

<option value="#a; imagea.src='a2.jpg">location A</option>

Thank you.

Answer 1

You'll need to modify the MM_jumpMenu function. Please post the source of that function.

Answer 2

MM_jumpMenu is a Dreamweaver function. You probably don't want to go there. Besides that, clumping a bunch of stuff together in the value attribute smells bad. Do something like this instead --

<img id="my-image" src="img/default.gif" />

<form name="form">
<select name="menu1" 
    onchange="MM_jumpMenu('parent',this,1); updateImage('my-image', this)">
<option value="#" selected>SELECT</option> 
<option value="#a">location A</option>
<option value="#b">location B</option> 
</form>

<script type="text/javascript">
updateImage = function(imageId, select) {
    var images = {
        a: 'img/a.gif',
        b: 'img/b.gif'
    }
    var key = select.value.substr(1);
    if (typeof images[key] != 'undefined') {
        document.getElementById(imageId).src = images[key];
    }
};
</script>

Answer 3

MM_jumpMenu() is probably a big monolithic thing from Macromedia. Modifying it will be difficult if not impossible. The other issue is that MM_jumpMenu() seems to depend on the value being an anchor. Once you introduce additional information into the value attribute, MM_jumpMenu() will probably stop working.

Given all of that, I'd suggest hijacking another attribute on the <option> tag and writing your own new function:

<form name="form">
    <select name="menu1"
        onchange="MM_jumpMenu('parent',this,1);changeImageSrc(this);">
    <option value="#" selected>SELECT</option> 
    <option id="a2" value="#a">location A</option>
    <option id="b2" value="#b">location B</option> 
</form>
<script type="text/javascript">
function changeImageSrc(sel) {
    var opt = sel.options[sel.selectedIndex];
    if (opt.id) {
        var img = document.getElementById('yourImageId');
        img.src = opt.id + '.jpg';
    }        
}
</script>