Open prettyPhoto from an image map

<script src="path/to/your/js/jquery.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="path/to/your/css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
<script src="path/to/your/js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>

 

JavaScript Code

 

<script type="text/javascript" charset="utf-8">

$(document).ready(function(){

  $("area[rel^='prettyPhoto']").prettyPhoto();

});

</script>

 

Html Code

 

<img src="images/thumbnails/image_map.jpg" width="387" height="85" usemap="#image_map" border="0">


<map name="image_map">

  <area shape="rect" coords="6,11,72,73" href="images/fullscreen/1.jpg" rel="prettyPhoto[image_map]">
<area shape="rect" coords="84,7,148,73" href="images/fullscreen/2.jpg" rel="prettyPhoto[image_map]">
<area shape="rect" coords="161,8,226,73" href="images/fullscreen/3.jpg" rel="prettyPhoto[image_map]">

  <area shape="rect" coords="236,7,301,76" href="images/fullscreen/4.jpg" rel="prettyPhoto[image_map]">

  <area shape="rect" coords="311,8,380,76" href="images/fullscreen/5.jpg" rel="prettyPhoto[image_map]">

</map>

 

 

http://www.no-margin-for-errors.com/blog/2011/04/19/tutorial-open-prettyphoto-from-an-image-map/