Need Best Answer for Image Map with Multiple Rollover Hotspots
Question
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.
1 answers
solution1
0 2018-10-25 16:10:08
something like this:
<img src="https://www.sanjuantitle.com/township-range-test.jpg" usemap="#image-map">
<map name="image-map">
<area target="_parent" alt="here's google" title="here's google" href="google.com" coords="126,135,325,333" shape="rect">
<area target="_parent" alt="here's more google" title="here's more google" href="google.com" coords="324,338,503,522" shape="rect">
<area target="_parent" alt="here's stackoverflow" title="here's stackoverflow" href="stackoverflow.com" coords="89,867,506,529,680,856,884,524,1050,868,1109,518,1070,954,1127,1004" shape="poly">
<area target="_parent" alt="yahoo?" title="yahoo?" href="yahoo.com" coords="809,236,344" shape="circle">
</map>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.