Image Map with Select Dropdown Issue

Question

I have two separate JavaScript functions running some actions...

The drop-down selection changes the image, and the image contains image map areas when clicked, changes the dropdown selection.

Here is the first function:

<script type="text/javascript">
function showimage()
{
if (!document.images)
return
document.images.pictures.src=
document.statehighlight.picture.options[document.statehighlight.picture.selectedIndex].id
}

Here is the second one:

<script type="text/javascript">
function setSelectValue(oVal) {
var oSel = document.statehighlight.picture;
for( var i = 0; i < oSel.options.length; i++ ) {
    if( oSel.options[i].value == oVal ) {
        oSel.options[i].selected = true;
    }
}
}
</script>

The issue is that when the image is clicked, the dropdown selection updates, but does NOT update the image.

Can this be fixed with jQuery forcing the dropdown to select as if it selecting using the mouse? Or is there a better way to make these two javascript functions work together? I am new to jQuery, and would love some direction, if possible.

Thank you in advance.

Answer 1

here is a jquery clean up as well!

var codeMap = {
    'ca': 'http://eyebones.com/ca.jpg',
    'or': 'http://eyebones.com/or.jpg',
    'wa': 'http://eyebones.com/wa.jpg',
    'id': 'http://eyebones.com/id.jpg',
    'ut': 'http://eyebones.com/ut.jpg',
    'wy': 'http://eyebones.com/wy.jpg'
};

$(function () {
    $('area').on('click', function () {
        updateSelection($(this).attr('id'));
    });
    $('#selectBox').on('change', function () {
        updateSelection($(this).val());
    });
});

function updateSelection(code) {
    $('#pictures').attr('src', codeMap[code]);
    $('#selectBox').val(code);
}

i had to change the markup slightly, just added some id attributes and removed the old stuff (you can clean it up)

<div class="content">
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td>
                <table cellspacing="5" cellpadding="10" style="border-collapse:separate; border-spacing:0px;" width="100%">
                    <tr>
                        <td valign="top"><b>1</b></td>
                        <td>
                            <p><strong>Where do you live?</strong> </p>
                            <form name="statehighlight">
                                <p>
                                    <select id="selectBox" name="picture" size="1" data-onchange="showimage()">
                                        <option style="display:none;" selected="" disabled="" value="">Select a State</option>
                                        <option id="http://eyebones.com/ca.jpg" value="ca">California</option>
                                        <option id="http://eyebones.com/id.jpg" value="id">Idaho</option>
                                        <option id="http://eyebones.com/or.jpg" value="or">Oregon</option>
                                        <option id="http://eyebones.com/ut.jpg" value="ut">Utah</option>
                                        <option id="http://eyebones.com/wa.jpg" value="wa">Washington</option>
                                        <option id="http://eyebones.com/wy.jpg" value="wy">Wyoming</option>
                                    </select>
                                </p>
                            </form>
                        </td>
                    </tr>
                    <tr>
                        <td valign="top"><b>2</b></td>
                        <td>
                            <p><strong>What is the distance in feet?</strong> </p>
                            <p>    <input length="4" onkeypress="return isNumberKey(event)" type="text" placeholder="Enter Distance">  </p>
                        </td>
                    </tr>
                </table>
            </td>
            <td><img usemap="#pacpowermap" src="http://eyebones.com/us.jpg" name="pictures" id="pictures"></td>
        </tr>
    </table>

    <br />
    <a class="btn" href="#">Next</a>


    <map name="pacpowermap" id="pacpowermap">
        <area shape="rect" coords="533,341,535,343" alt="Image Map" style="outline:none;" title="Pacific Power Locations" href="#" />
        <area id="wa" alt="" title="" data-href="javascript:setSelectValue('wa');" shape="poly" coords="35,20,35,44,43,48,47,56,66,55,90,59,97,26,56,15,51,32,44,37,44,26" style="outline:none;" target="_self" />
        <area id="or" alt="" title="oregon" data-href="javascript:setSelectValue('or');" shape="poly" coords="18,91,21,81,29,62,35,47,43,55,62,58,90,63,84,78,81,92,77,107" style="outline:none;" target="_self" />
        <area id="ca" alt="" title="california" data-href="javascript:setSelectValue('ca');" shape="poly" coords="18,100,12,117,15,141,23,168,30,192,48,206,57,223,80,227,89,209,43,142,52,106,19,94" style="outline:none;" target="_self" />
        <area id="id" alt="" title="idaho" data-href="javascript:setSelectValue('id');" shape="poly" coords="106,27,98,27,91,60,95,71,85,79,82,107,133,119,139,87,122,87,116,70,113,73,115,58,104,48" style="outline:none;" target="_self" />
        <area id="ut" alt="" title="utah" data-href="javascript:setSelectValue('ut');" shape="poly" coords="109,117,97,175,144,185,150,137,134,134,134,119" style="outline:none;" target="_self" />
        <area id="wy" alt="" title="" data-href="javascript:setSelectValue('wy');" shape="poly" coords="200,90,199,139,133,130,141,86" style="outline:none;" target="_self" />
    </map>



</div>

Answer 2

try this:

    function setSelectValue(oVal) {
        var oSel = document.statehighlight.picture;
        for (var i = 0; i < oSel.options.length; i++) {
            if (oSel.options[i].value == oVal) {
                oSel.options[i].selected = true;
                document.images.pictures.src = document.statehighlight.picture.options[document.statehighlight.picture.selectedIndex].id;
            }
        }
    }

you could use jquery to clean this up, but this got it to work for me