What am I missing? I am using the David Lynch maphilight plug in and have been comparing my code to this page to troubleshoot, yet after two days, I am still having an issue. The colors won't show when I hover over (or even click) on any part of the mapped image. The links work as expected.
My script call is:
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="jquery.maphilight.js"></script>
<script type="text/javascript">$(function() {
$('.AMGCmap1').maphilight();
</script>
</head>
and the img and map code are:
<div>
<img class ="map" id ="AMGCmap1" src="Images\AMGC Logo Big.png" alt="AMGC Logo" usemap="#AGMCmap" border="15">
<map name="AGMCmap">
<area shape="poly" coords="61,432, 58,346, 71,285, 148,287, 164,345, 166,432" href="news.html" title= "News" data-maphilight='{"strokeColor":"0000ff","strokeWidth":5,"fillColor":"ff0000","fillOpacity":0.6}' >
</map>
</div>
I tried using the img ID and just "'.map'" in the function, but I am seeing no difference. Anyone else having issues like this?
I am working in Chrome at the moment, if that helps at all.
Here you have an id meanwhile you are calling a class in your script.
That might be the problem. Edit either the id in your HTML to be a class:
or call an id in your script:
Anyway, I also have the same problem even if I have checked my script so carefully, let me know if you could get it to work after this fix.