jquery-map-trifecta

Combines RWD Image Maps, Maphilight, and Zoom into 1 solution. Optional table integration.

Live Demo: http://jsfiddle.net/k6pukgLd/

---

Usage:

Simply pass in the Image for the Responsive, Hilight, and Zoom features

• Double-click Image Map to Zoom

• Hold down Ctrl key to select multiple

<link href="css/map-trifecta.css" rel="stylesheet" /> <!--Needed for Zoom and img-->
<script src="js/jquery.map-trifecta.min.js"></script>
 
<img src="images/shapes.png" usemap="#shapesMap">
<map name="shapesMap">
  <area coords="5,136,80,9" alt="Triangle" href="#" shape="poly" />
  <area coords="177,134,179..." alt="Square" href="#" shape="poly" />
  <area coords="358,123,353..." alt="Circle" href="#" shape="poly" />
</map>

$("img[usemap]").mapTrifecta();
 
Defaults:
$("img[usemap]").mapTrifecta({
        zoom: true,
        table: true,
        fill: true,
        fillColor: 'FF0000',
        fillOpacity: 0.1,
        stroke: true,
        strokeColor: 'FF0000',
        strokeOpacity: 1,
        strokeWidth: 1,
        fade: true,
        alwaysOn: false,
        neverOn: false,
        groupBy: false,
        wrapClass: true,
        shadow: false,
        shadowX: 0,
        shadowY: 0,
        shadowRadius: 10,
        shadowColor: '000000',
        shadowOpacity: 0.8,
        shadowPosition: 'outside',
        shadowFrom: false
    });

With Table:

You can have a table (shown in index.html) respond with the Image Map Hilight.
To do this just have the <tr> of the table and the <area> of the map include a data-mapid parameter. Matching id's with Hilight.