Question

i’m trying to get a link from a image map to change selected item in listbox

so that each link on image-map changes the selected item in listbox

<form id="form1" name="form1" method="post" action="">
  <select name="select" id="select">
    <option>1</option>
    <option>2</option>
    <option>3</option>
  </select>
</form>

how can i do this in jquery ?

thanks in advance 😉

Answer 1

This how you can trigger listbox selection according to the image map link:

<img src="http://www.w3schools.com/tags/planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap" />

<map name="planetmap" id="planetmap">
    <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun" id="sun" />
    <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury" id="mercury" />
    <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus" id="venus" />
</map>

<select id="listbox">
    <option value="sun">Sun</option>
    <option value="mercury">Mercury</option>
    <option value="venus">Venus</option>
</select>

<script type="text/javascript">
    $('#planetmap area').click(function(e) {
        alert('Selecting the ' + this.alt + '\n URL: ' + this.href);
        $('#listbox option[value="' + this.id + '"]').attr('selected', 'selected');
        return false;
    });
</script>