Currently, I am utilizing ImageMapster to make adjustments to an image map while hovering. However, I am facing challenges with both the image map itself and the ImageMapster plugin. The issues I am encountering are:
1) Despite specifying a height and width for my image, its dimensions appear inconsistent across different browsers. In Chrome, the defined polygons are the correct size, but in Firefox, they appear too small.
2) On top of that, the ImageMapster plugin is not functioning properly in Chrome.
Below you can find the code I am using:
<script type="text/javascript">
$(document).ready(function() {
$('#waterfall').mapster({
singleSelect: true,
clickNavigate: true,
fill: true,
fillColor: '000000',
fillOpacity: 0.5,
});
});
</script>
<div class="chartmap">
<img id="waterfall" src="waterfall_diagram/waterfall.png" width="650" height="72" usemap="#water" alt="Waterfall Methodology Map">
<map name="water">
<area shape="poly" coords="6,3,72,3,96,37,72,69,4,69,30,37,6,3" href="waterfall_project_initiation.html" alt="Project Initiation">
<area shape="poly" coords="75,3,165,3,188.5,37,164,69,74,69,100,37,75,3" href="waterfall_demand_management.html" alt="Demand Management">
<area shape="poly" coords="167,3,236.5,3,261,37,236.5,69,167,69,192,37,167,3" href="waterfall_definition.html" alt="Definition">
<area shape="poly" coords="240,3,326,3,350,37,326,69,240,69,264,37,240,3" href="#" alt="Requirements Analysis">
<area shape="poly" coords="329,3,380,3,405,37,380,69,329,69,353,37,329,3" href="#" alt="Design">
<area shape="poly" coords="384,3,430,3,455,37,430,69,384,69,408,37,384,3" href="#" alt="Build">
<area shape="poly" coords="434,3,483,3,509,37,484,69,433,69,458,37,434,3" href="#" alt="Test">
<area shape="poly" coords="487,3,557,3,583,37,558,69,488,69,511,37,487,3" href="#" alt="Deployment">
<area shape="poly" coords="561,3,621,3,646,37,621,69,561,69,586,37,561,3" href="#" alt="Closure">
</map>
</div>
To see a demonstration, visit this link: http://jsfiddle.net/t6K8X/5/
Upon running it in Chrome, you will notice outlines appearing around the image when clicked, showing correctly sized polygons. However, hover effects are not functioning as expected. In Firefox, hovering reveals smaller darkened polygons instead of displaying them at the right size.
If you have any suggestions or solutions, please share them. Thank you in advance!