smartImageMapper 1.2

a jQuery imagemap plugin tool to draw dynamically shapes and output the imagemaps in html, svg and JSON format.

demo

Dependencies

jQuery and kinetic.js (html5 canvas library)

Implementation

<script type="text/javascript" src="js/jquery1.11.1.min.js"></script>
<script type="text/javascript" src="js/kinetic.5.1.0.min.js"></script>
<script type="text/javascript" src="js/draggable.js"></script>
<script type="text/javascript" src="js/smartimagemapper.1.2.js"></script>
<script type="text/javascript" src="js/smartimagemapper.i18n.en_US.js"></script>
<script language="javascript">
  $(window).load(function(){
    var myOps = {imagePath:'images/test.jpg'};
    smartImageMap.module.init(myOps);
  });
</script>

Options

  smartImageMap.module.init({
    imagePath:'/images/myimage.jpg'                   // path to the Image mandartory
    fillColor:'rgba(0,170,234,.4)',                   // fill color of the shapes 
    strokeColor:'rgba(0,170,234,.9)',                 // stroke color of the sahpes
    fillColorHandle:'rgba(255,255,255,1)',            // fill color of the edit handle points
    strokeColorHandle:'rgba(0,170,234,1)',            // stroke color of the edit handle points
    fillColorCreate:'rgba(170,170,170,.4)',           // fill color of the shape during drawing
    strokeColorCreate:'rgba(170,170,170,.9)',         // stroke color of the shape during drawing
    fillColorHandleCreate:'rgba(255,255,255,1)',      // fill color of the edit handle during drawing
    strokeColorHandleCreate:'rgba(170,170,170,1)',    // stroke color of the edit handle during drawing
    radiusLineColor:'rgba(0,0,0,.75)',                // line color of the edit line of circle and rectangle
    centerPointFillColor:'rgba(0,0,0,.75)',           // fill color of the centerpoint of the circle during drawing
    centerPointStrokeColor:'rgba(0,0,0,1)',           // stroke color of the centerpoint of the circle during drawing
    fillColorDrag:'rgba(0,170,234,.2)',               // fill color of the shape during dragging
    strokeColorDrag:'rgba(255,153,0,.5)',             // stroke color of the shape during dragging
    maximumImageSide:900,                             // max length of either width or height of the displayed image in the tool (result imagemap will still use original w and h)
    htmlcontainer:'body'                              // container element can either be elementname like 'body', or element id like '#mycontainer' must be unique
});