I am experiencing an issue with a Joomla template that has a custom jQuery menu. When I hover over the map with my mouse, the overlay appears slightly larger than expected. This problem seems to be occurring in Firefox and IE 11, leading me to believe it might be a bug within my code. I am using Joomla 3.2 along with Flexi Custom Code (version 1.3.1 - September 30th, 2012).
<HTML>
<BODY>
<img src="templates/images/Banner_menu.png" width="896" height="410" usemap="#MyMap" alt="" id="main"/>
<img src="templates/images/Banner_1.png" width="896" height="410" usemap="#MyMap" alt="" id="One"/>
<img src="templates/images/Banner_2.png" width="896" height="410" usemap="#MyMap" alt="" id="Two"/>
<img src="templates/images/Banner_3.png" width="896" height="410" usemap="#MyMap" alt="" id="Three"/>
<map name="MyMap">
<area shape="rect" coords="0,0,283,430" href="/index.php/one" alt="#One" />
<area shape="rect" coords="283,0,566,430" href="/index.php/two" alt="#Two" />
<area shape="rect" coords="566,0,896,430" href="/index.php/three" alt="#Three"/>
</map>
</BODY>
</HTML>
<script>
$.noConflict();
jQuery( document ).ready(function( $ ) {
$(document).ready(function(e) {
$('img[usemap]').rwdImageMaps();
$("#One").hide();
$("#Two").hide();
$("#Three").hide();
$("area").on({
mouseenter: function () {
$($(this).attr('alt')).show();
},
mouseleave: function () {
$("#One").hide();
$("#Two").hide();
$("#Three").hide();
},
click: function() {
window.open("/index.php/" + $(this).attr('link') ,"_self");
}
});
});
});
</script>
<style>
div {
top: 0;
left: 0;
overflow: hidden;
}
img[usemap] {
border: none;
height: auto;
max-width: 100%;
width: auto;
}
#One {
position:absolute;
top:0;
left:0;
width:100%;
}
#Two {
position:absolute;
top:0;
left:0;
width:100%;
}
#Three {
position:absolute;
top:0;
left:0;
width:100%;
}
#main {
position:relative;
top:0;
left:0;
width:100%;
}
</style>