A responsive image map plugin with jquery plugin

Dynomap is a responsive image map plugin that allows for multiple states of when interacting with areas on the map and custom callbacks.
Initializer
This is the minimal you need to initialize the Dynomap
Plugin
$(".dynomap").dynomap({
"background": {
"image": "path to image"
},
"hotSpots": [
{
"area": "coordinates for image map"
}
]
});
And here is the full set of available configurables as a initilizer
$(".dynomap").dynomap({
"background": {
"image": "path to image",
"title": "alt and title attributes for image"
},
"hotSpots": [
{
"area": "coordinates for image map",
"title": "alt and title attributes for area",
"overImg": "path to image",
"downImg": "path to image",
"clickedImg": "path to image",
"visitedImg": "path to image"
}
],
clicked : function ($this, index) {/*callback function when area is clicked*/}
});
Requirement
The images that are used for background, overImg, downImg, clickedImg, visitedImg all have to be same in dimension. The image map area coordinates are given based on the original dimensions of the background image. Look at the demos as reference material.
CallBack
When initializing Dynomap Plugin you have the option of creating a callback function. This call back function comes with two parameters. One being your Dom Node and the other being the index of which area you clicked.
Browser Support
Tested on the these systems and browsers
Windows 7
- IE Ver 10
- Firefox Ver.25
- Chrome Ver.31
Mac OSX 10.8
- Chrome Ver.31
- Firefox Ver.25
- Safari Ver.6
Ipad 2 IOS 7
- Chrome
- Safari
You might also like
Tags
accordion accordion menu animation navigation animation navigation menu buttons carousel checkbox inputs css3 css3 menu css3 navigation date picker dialog drag drop drop down menu drop down navigation menu elastic navigation form gallery glide navigation horizontal navigation menu hover effect image gallery image hover image lightbox image scroller image slideshow multi-level navigation menus rating select dependent select list slide image slider menu stylish form table tabs text effect text scroller tooltips tree menu vertical navigation menu