jQuery Plugin To Generate Stylable Image Maps Using SVG - ProMap

ProMap is a jQuery plugin that helps you add responsive, fully styleable image maps with clickable areas and tooltips to a specific image using SVG.

How it works:

• Get all images on page that use the 'usemap' attribute.
• Get data about 'real' width and height and store img and svg DOM. Finally equalize svg and img visually, reset svg content and get new Adobe SVG Snap Object on svg DOM.
• Draw each Area 'by hand' after the coordinates were scaled accordingly. Hook up the different events mathing to content and href.
• Append a tooltip to the image map.

How to use it:

1. The plugin requires jQuery library and the Snap.svg library which creates interactive, resolution-independent SVG graphs on the image.

<script src="jquery.min.js"></script>
<script src="snap.svg-min.js"></script>

2. Load the jQuery ProMap plugin's files in the webpage.

<link href="css/promap.css" rel="stylesheet">
<script src="js/jq-promap.js"></script>

3. Insert an image into your webpage and specify the map selector using usemap attribute:

<img src="1.jpg" usemap="#image-map">

4. Create a map element that contains a number of area elements defining the clickable areas in the image map.

<map name="image-map">
  <area shape="poly" coords="2381, 221, 2361, 647, 2344, 684, 2334, 803, 2328, 915, 2281, 1014, 2235, 1071, 2218, 1239, 2185, 1252, 2192, 1477, 2169, 1484, 2166, 2535, 2146, 2529, 2132, 2548, 2132, 2667, 2119, 2691, 2113, 2763, 2076, 2757, 2050, 2793, 2040, 2925, 2089, 2922, 2089, 3011, 2126, 3008, 2136, 3067, 2215, 3015, 2665, 3031, 2662, 3127, 2685, 3127, 2698, 3058, 2698, 2800, 2718, 2757, 2642, 2740, 2629, 2529, 2589, 2522, 2582, 1477, 2576, 1474, 2572, 1259, 2539, 1209, 2546, 1117, 2536, 1110, 2523, 1077, 2483, 1028, 2453, 962, 2427, 899, 2424, 823, 2424, 724, 2397, 647, 2390, 254" href="#" content="Tooltip">
  <area shape="poly" coords="3125, 1090, 3115, 1249, 3095, 1269, 3068, 1282, 3058, 1573, 3082, 1583, 3098, 1768, 3144, 1702, 3174, 1695, 3181, 1656, 3168, 1282, 3141, 1256" href="#" content="Tooltip">
</map>

5. Initialize the plugin and done.

$(document.body).promap();

---

This awesome jQuery plugin is developed by jakoblorz. For more Advanced Usages, please check the demo page or visit the official website.