It seems that using jquery.js and jquery.maphilight.js would be the best solution for my rollover map project, however I cannot seem to make it work. I am trying to follow the very basic example posted here: https://davidlynch.org/projects/maphilight/docs/ The "Simple Demo" under "Demos" shows exactly what I want to do, and I think I am following the code exactly to try and duplicate. Here is what I'm using:
<!DOCTYPE html>
<html>
<head>
<style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.maphilight.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.map').maphilight();
});
</script>
</style>
</head>
<body padding="0" margin="0">
<img class="map" src="township-range-test.jpg" width="1400" height="1050" usemap="#countymap">
<map name="countymap">
<area shape="rect" coords="329,530,504,714" title="29-13" href="javascript:alert('Navigate to ITORIAN');" data-maphilight='{"fillColor":"0000ff","fillOpacity":0.3}'>
<area shape="rect" coords="504,530,692,714" title="29-12" href="javascript:alert('Navigate to GOOGLE');">
</map>
</body>
</html>
I have a copy of the jquery.js and the jquery.maphilight.js scripts in the same directory as my test web page here:
https://www.sanjuantitle.com/sj-county-map-java.html
If you roll your mouse over the square "29N-13W" the link works fine, and also the link works for the square to the right of that "29N-12W". So the only thing that is not working is the rollover "hilighting" that works just fine on the demo page I mentioned above.
I'm sure that it's something simple I'm missing, but I have gone over it several times and cannot find the flaw in my code. I would appreciate any suggestions and help. Thanks.
something like this: