Arete Arete - 5 months ago 38
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

ID="02"
is clicked I wamt the image source to change to
02.png
and so on...

The markup I have for the
area
shapes are:

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


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


How can I use jquery/javascript to achieve this?

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

});

Edit: Working fiddle here: jsfiddle.net/940yj9vr/1

Comments