When I add the (jquery.maphilight.js) map highlight and also add the plugin bootstrap 4, it does not work and no longer shows the 'highlighted' area on mouseover, the bootstrap seems to disable the maphilight.
Map-highlight without the bootstrap works correctly
Can anyone please help?? Thanks in advance! The sample html
<!doctype html>
<html lang="en">
<head>
<title>Test Page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="../styles.css" title="style">
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script type="text/javascript" src="../js/jquery.maphilight.js"></script>
<script>
$(document).ready(function() {
$('.map').maphilight({
fillColor: '008800'
});
});
</script>
</head>
<body>
<img src="../_scrum/images/big_pic.jpg" width="671" height="514" border="0" usemap="#bigpic" alt="" class="map">
<map id="bigpic" name="bigpic">
<area shape="rect" coords="3,116,28,334" href="#inspection" alt="inspection" title="Part of the Scrum Pillars - to Inspect system demos" class="group">
<area shape="rect" coords="20,219,175,272" href="#sprintbacklog" alt="sprintbacklog" title="These are items to be worked on by the scrum team during a sprint" class="group" >
<area shape="rect" coords="19,276,176,325" href="#goal" alt="goal" title="Sprint Goal is the objective the scrum team will focus on during the execution of the sprint" class="group" >
<area shape="rect" coords="181,157,267,238" href="#po" alt="Product Owner" title="One member of the development team, to prioritise backlog items and is the owner for the product backlog" class="group" >
</map>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html>