Use MapHilight Jquery plug-in to highlight in different colors

jquery-plugins

I'm trying to figure out how to use MapHilight but not having much luck. The only "documentation" on it seems to just be some working examples. This might be because the site hosting the plugin, seems to be down. I've also just learned JQuery yesterday so I don't know if that's impeding my progress. What I'd like to do is specify the look and feel of my image map hilighting on an area by area basis. David Lynch's Simple Demo shows this, but I'm not sure how it's working. I don't understand why he uses the image has the background for the containing div and what purposes the canvases are serving. Here's what I have so far:

...
    <script type="text/javascript">
        $(function () {
            $('#ImageMap1').maphilight();
        });
    </script>
</head>
...

<div style="float: left">
    <img id="ImageMap1" src="solar_system.jpg" usemap="#ImageMapmapAreas" />
    <map id="ImageMapmapAreas" name="ImageMapmapAreas">
        <area alt="" title="" href="#Jupiter" coords="222,186,28" shape="circle"/>
        <area alt="" title="" href="#Earth" coords="135,194,13" shape="circle"
            data-maphilight="{'strokeColor':'0000ff','strokeWidth':5,'fillColor':'ff0000','fillOpacity':0.6}"/>
    </map>
</div>

This gives me, I guess, default highlighting of a solid red line. The data-maphilight metadata is not being used. An explanation of how to get this working would be great, but directing me to a resource explaining how to use maphilight overall would be even better because I ultimately want to make use of almost everything in this demo.

Best Answer

I see that you decided to switch to Silverlight but since I'm fiddling with maphighlight now I decided to look at this. The thing is that the sample you posted works fine after switching " with ' and vice versa. 

<div style="float: left">
    <img id="ImageMap1" src="http://geographyandhistory.wikispaces.com/file/view/solar_system.jpg/43347125/283x202/solar_system.jpg" usemap="#ImageMapmapAreas" />
    <map id="ImageMapmapAreas" name="ImageMapmapAreas">
        <area alt="" title="" href="#Earth" coords="228,151,53" shape="circle" data-maphilight='{"strokeColor":"0000ff","strokeWidth":5,"fillColor":"00ff00","fillOpacity":0.6}'/>
        <area alt="" title="" href="#Sun" coords="68,54,44" shape="circle" data-maphilight="{'strokeColor':'0000ff','strokeWidth':5,'fillColor':'00ff00','fillOpacity':0.6}"/>
    </map>
</div>​

Here's a fiddle - http://jsfiddle.net/k67gq/6/ See how the 'Earth' and 'Sun' areas have the same 'data-maphilight' attributes except quotation marks.

Related Topic