jamietre/ImageMapster — Issue #47: Trouble implementing ImageMapster
Author: emjaysea
Created: 2012-03-05 02:20:39+00:00
State: open

**This discussion was begun on Outsharked.com. James indicated it would be better suited for github, so I'm including the original exchange, and then adding my new whinges to the bottom:**

**From me:**
"While I appreciate your efforts, this seems to be beyond the layman such as myself. While I got maphilight up and running in a half an hour, I failed to get ImageMapster to do even the most rudimentary highlighting, let alone the more complex stuff I was hoping to achieve with it. A simple break down of how to implement your plugin would go a long ways towards making it accessible to the average web head (non-js coding web head, I should say).

Here's my map:
http://www.michigan.gov/documents/dnr/FMD_RS_378306_7.html All I want to do is have a mouse over of the Research Station button in the legend cause all of the research station areas to light up together as a group, thus identifying all of them at once, but still have the individual areas operate independently when the user mouses over one of those.

Thanks for your time."

**Jame's reply:**
"I've tried to provide many different examples on the demos page, with complete code for each. The simplest implementation is just $('img').mapster(); which will activate all the areas of any imagemap on the page when moused over. If maphilight works for your purposes, and is easier for you to use, then maybe it's a better choice, especially since it is a much smaller script. I'm not trying to replace maphilight, rather, ImageMapster is meant to provide features that are beyond the capabilities of that script. But using advanced features naturally requires a bit more understanding of their use, and the script can't predict exactly what you are trying to do.

The basic use is just to activate areas when you mouse over them, and no configuration is required for that. You're trying to do two slightly advanced things: activate areas from outside the map, which requires using script, and group all the areas together, which requires using the 'mapKey' option to identify the areas to group together, or use script to select them some other way.

The link you sent me doesn't look like it was set up for ImageMapster, since jquery.imagemapster.js is not included at all, so it's hard for me to tell what you have tried. If you can send me a link with your attempt to use ImageMapster I can take a look and give you specific advice.

The link below shows a copy of your map set up with with what I think you are trying to do using ImageMapster. We can do that by selecting all areas and calling "set",true to highlight them when you mouse over the link, and calling "set",false to unhighlight them when mousing out.

http://jsfiddle.net/CGaWF/

Another way that is a bit more flexible, in case you want to be able to define other groups, is to use a "mapKey" and define an attribute on each area, and assign two groups to each area: a unique one first, so that they will highlight individually on mouseover (the first group is always what applies on mouseover), followed by another one that is the same for each group, that you can use to highlight them all at once from code. I've used "data-group" here:

http://jsfiddle.net/2Y5TJ/

Hope that helps. If you have more questions, the project page on github http://www.github.com/jamietre... is a better place to ask them (it's just more conducive to Q&A and it's better structured for other people who may be looking for answers to a similar question to find them)."

**My New Whinges**
That's great, thanks. I don't actually want to activate areas from outside the map , I want the last rectangle on the legend (which is part of the image) to cause all of the areas to light up. I was able to use the code you created to do that, though, by deleting the text link and adding a new hotspot with the id "researchStations" covering the last rectangle on the legend. Here's the result. Thanks for your help with that, I really appreciate it.
I'd like to preface this next part with the claim, "I'm generally not so feeble/helpless when it comes to this stuff," but, now I'm having trouble configuring that script to add a bright red border and lower the fill opacity. I've been looking at your other demos where I see things like this one from the big usa map:

$('#usa').mapster({
fillOpacity: 0.5,
render_highlight: {
fillColor: '2aff00',
stroke: true,
altImage: 'examples/images/usa_map_720_alt_4.jpg'
},
render_select: {
fillColor: 'ff000c',
stroke: false,
altImage: 'examples/images/usa_map_720_alt_5.jpg'
},

I can't figure out where I would add code like fillOpacity: 0.5 to the script you whipped up for me. I'm using Dreamweaver, and whenever I add some snippet into the code you sent, it doesn't work and Dreamweaver indicates there's an error on some line or another. Again, I'm not a java coder, I'm strictly HTML/CSS capable.

You've gone out of your way for me already, and I'll understand if you feel you've done enough!

Thanks,

Matt Clara