Image maps are useful for making image part selectable or clickable, but we can make it more interactive with help one jQuery plugin called ImageMapster.
Lets create simple demo page with ImageMapster plugin.
Step 1:
Download ImageMapster jQuery plugin and add it on web page.
Step 2:
Add image, for demo purpose I'm going to use floor plan image.
Step 3:
Now create image map, we can create image map with below tools.
3.1 Dreamweaver :
Open created html page in Dreamweaver and goto image properties
Create rectangle, circle and polygon hot spots as per your requirements.
Html code after adding image map is shown below.
<body>
<img src="floor-plan-1.jpg" width="824" height="1042" id="myPlan" usemap="#myPlan">
<map name="myPlan">
<area shape="rect" data-key="BED" coords="430,233,631,433" href="#" alt="">
<area shape="rect" data-key="TOI" coords="277,711,360,830" href="#" alt="">
<area shape="rect" data-key="KIT" coords="370,653,593,831" href="#" alt="">
<area shape="rect" data-key="BAT" coords="335,379,431,430" href="#" alt="">
<area shape="poly" data-key="LIV" coords="96,738,96,447,589,446,590,638,310,641,310,650,367,651,367,699,264,702,264,739,96,740" href="#" alt="">
<area shape="poly" data-key="UTL" coords="643,310,736,310,738,738,679,740,679,749,669,752,670,760,681,763,683,828,602,830,600,446,641,446,644,309" href="#" alt="">
<area shape="rect" data-key="KIT" coords="189,232,326,437" href="#">
<area shape="rect" data-key="KIT" coords="336,234,419,370" href="#">
<area shape="rect" data-key="UTL" coords="190,162,330,225" href="#">
</map>
</body>
3.2 Online tools like: http://www.image-maps.com/ or http://www.maschek.hu/imagemap/imgmapsimply upload your image => draw image map as you want => get html code.
or
Step 4:
As we have already added jQuery and ImageMapster plugins to page, now lets initialize image map with below code.
$(document).ready(function () {
$('#myPlan').mapster({
showToolTip: true,
noHrefIsMask: false,
fillOpacity: 0.7,
strokeWidth: 2,
stroke: true,
strokeColor: 'ff0000',
mapKey: 'data-key',
singleSelect: true,
});
});Output :
You can see individual area now select-able and highlighted with block color, also border is highlighted with stroke effect.
Now lets add tool tip on hover over all sections, for that we need to add data attribute in each image area like shown below.
<area shape="rect" data-key="BED" coords="430,233,631,433" href="#" alt="">
<area shape="rect" data-key="TOI" coords="277,711,360,830" href="#" alt="">
Here data-key are applied i.e BED for Bedroom and TOI for Toilet section you can add any key as you want.
Now initialize tool tips with below code.
<script type="text/javascript">
$(document).ready(function () {
$('#myPlan').mapster({
showToolTip: true,
noHrefIsMask: false,
fillOpacity: 0.7,
strokeWidth: 2,
stroke: true,
strokeColor: 'ff0000',
mapKey: 'data-key',
singleSelect: true,
areas: [
{
key: 'BED',
toolTip: 'bedroom area selected'
},
{
key: 'TOI',
toolTip: 'this is toilet'
},
{
key: 'KIT',
toolTip: 'this is kitchen'
},
{
key: 'BAT',
toolTip: 'this is bathroom'
},
{
key: 'LIV',
toolTip: 'this is living room'
},
{
key: 'UTL',
toolTip: 'this is utility room'
}
]
});
});
</script>in array of areas I have added key names and tool tip to be shown.
Output with tool tips:
