Use MapHilight Jquery plug-in to highlight in different colors

Question

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.

score 6 · Accepted Answer · answered Nov 26 '12 at 20:10

6

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.

answered Nov 26 '12 at 20:10

nnikolov06

183
3
11

Thanks for posting. That's interesting. Do you know why it matters? I thought " and ' were interchangeable in javascript. So do you just basically have to reverse engineer the demos and the maphilight plugin to use the plugin? – xr280xr Nov 26 '12 at 20:33
I just went over the jQuery Core Style Guidelines - [docs.jquery.com](http://docs.jquery.com/JQuery_Core_Style_Guidelines). Notice the remark for string usage near the end of the document: STRINGS Strings should always use double-quotes instead of single-quotes. I suppose this could be the issue at hand. – nnikolov06 Nov 28 '12 at 10:25
1

Take a look at this question - [single quotes in data attribute containing json](http://stackoverflow.com/questions/5168268/single-quotes-in-data-attribute-containing-json). – nnikolov06 Nov 28 '12 at 13:42
Strictly speaking Javascript (and therefore jQuery) don't mind which quotes you use. Single and double quotes are interchangeable. However JSON requires double quotes and as jQuery users JSON for most of it's data-interchange there can be a conflict if you are not careful. – David Newcomb Nov 06 '13 at 03:37

Sathya Ganepola · Answer 2 · 2014-11-20T11:14:32.827

1

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

edited Nov 20 '14 at 11:14

answered Nov 20 '14 at 11:08

Sathya Ganepola

11
2

score 0 · Answer 3 · answered Oct 03 '12 at 17:01

0

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.

answered Oct 03 '12 at 17:01

xr280xr

12,621
7
81
125

Well now you can switch back to maphilight then ;) It'll save you having to force all your users to unnecessarily install Silverlight. – David Newcomb Nov 06 '13 at 03:40

Use MapHilight Jquery plug-in to highlight in different colors

3 Answers3