Example showcasing different behaviors in various browsers (jsfiddle link):
<!DOCTYPE html>
<html>
<head>
<title>Browser Behavior Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<map name="myMap" id="myMap">
<area shape="rect" coords="10,10,100,100">
</map>
<img src="http://placehold.it/350x150" alt="" usemap="#myMap">
<script type="text/javascript">
$(function () {
$("map#myMap area").click(function () {
alert("Clicked!");
});
});
</script>
</body>
</html>
Observations when hovering over the upper left-hand corner of the image in different browsers:
- Chome: Displays the "hand" cursor and registers clicks.
- Firefox: Doesn't show the "hand" cursor but still reacts to clicks.
- IE and Edge: No "hand" cursor displayed and doesn't respond to clicks.
Although using href in the area tag is an option, my site's dynamic nature requires jQuery functionality like hover highlights and click handlers for areas. While fixing Firefox behavior with area { cursor: pointer; } is possible, it does not address the issue in IE and Edge.
Is there a flaw in my code or is this a compatibility bug specific to IE and Edge?