CODEWITHSUNDEEP
jquery-plugins
xr280xr
xr280xr

Reputation: 13302

Use MapHilight Jquery plug-in to highlight in different colors

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.

Upvotes: 3

Views: 9847

Answers (3)

Sathya Ganepola
Sathya Ganepola

Reputation: 11

Instead of " or ', using &quot; in data-maphilight worked for me. Ex: data-maphilight="{&quot;strokeColor&quot;:&quot;0000ff&quot;,...

Upvotes: 1

nnikolov06
nnikolov06

Reputation: 183

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.

Upvotes: 6

xr280xr
xr280xr

Reputation: 13302

I guess there's nothing available. Strange when I saw so many references to this plugin when searching for how to do custom hilighting. I ended up having to use Silverlight.

Upvotes: 0

Related Questions