How to use the maphilight jQuery plugin

Steps to create a webpage with an image map with hotspots (area's in html) which can be high-lighted.

1. Create a webpage with an image. Make sure the Insert tab is visible (Window > Insert). Draw the hotspot area's using the hotspot-tools of Dreamweaver to create the image map:
   
   As an alternative to Dreanweaver, there are many online tools to create an image map.
2. Copy the file jquery.maphilight.min.js from this example and put it in the same folder as the webpage. (you can also download jquery.maphilight.min.js here)
3. Add the jQuery library and the maphilight-script to the header of your html code:

   <!-- Add jQuery library -->
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
   
   <!-- Add maphilight plugin -->
   <script type="text/javascript" src="jquery.maphilight.min.js"></script>
   
   <!-- Activate maphilight plugin -->
   <script type="text/javascript">$(function() {
           $('.map').maphilight();
       });
   </script>
   

4. Add class="map" to the image (img-tag):

   <img src="pict.jpg" class="map" width="905" height="551" border="0" usemap="#Map">
   

5. Save the webpage and test it in a webbrowser (Liveview in Dreamweaver doesn't always work properly).
6. (Optional) Add the attribute data-maphilight to the <map>> elements to create your own custom hightlights. With this you can for example change line colors, fill-colors and opacity of the hightlighted area. Je kunt hiermee kleuren van de lijn en het gebied (fill) opgeven, en bijv. ook instellen hoe doorzichtig het hilight-gebied is. See the source of this demo page for examples.

More info: jQuery maphilight documentation.