Arete Arete - 10 months ago 88
jQuery Question

Change image on click with HTML area

I have an image with multiple image maps. If one link/area is clicked I want the image to change into another image. So for example if

is clicked I wamt the image source to change to
and so on...

The markup I have for the
shapes are:

<img src="01.jpg" usemap="#Map" alt="">

<map name="Map">
<area shape="rect" id="02" coords="7,6,191,375" href="#" alt="">

How can I use jquery/javascript to achieve this?

$(document).ready(function() {
   $("area").click(function() {
      var areaId = $(this).attr("id");
      $("img").attr("src", "" + areaId + ".png");


Edit: Working fiddle here: