I am making a jQuery map for a client who has offices in many states. Right now, when I click on a state, the text at the bottom remains until I click on another state, but I would like for the state to keep the color red after I click it. It will be fine if states I hover over keep the same color, I just want to make sure the active state that the user clicks on is able to stand out.

Can someone please help me learn how to do this? I am new to Javascript so please bear with me if this is a stupid question. Thank you in advance for your help!

The first bit gets a reference to all of the states on the map and removes the fill property from all of them.This is so that only one state can be highlighted at once.The second bit changes the colour of the state that was just selected.

Now things started to kind of work in a cross browser way. IE8 started cooperating, but the map turns black and we lose our state-specific highlighting.

I then spent far too long playing around with applying classes and removing them and, and, and ...

In the end the best I could come up with was this IE8 demo, which probably isn't much use as the states remain highlighted once you have clicked on them.

I've spent several hours on this now and I really don't think you're going to get this to work. Sorry

jdelatorre312
—
2013-10-08T20:38:53Z —
#13

Wow, thank you so much for all your help. This map was for a project I needed to get done by end of day today. After hours of looking into html image mappers and the above, I just did the most obvious:

My map has four regions: west, midwest, southeast, and northeast. I manipulated the coordinates to get it this way. Overall the plugin works, the only part that wasn't working is keeping the hover color when it was clicked. I only have four regions, so what was the easiest thing to do???

Create five maps for IE8 and below, and leave the single map for everything else.

For IE8, I created a map for the default view and another four maps with the 'selected' region filled to the hover color.

The default map is displayed first and the other maps are display:none; On click, ONLY FOR IE8 AND BELOW, the map will hide the current view, and display the map with the section color filled to the hover color. To the user, the experience is the same as the regular map, except in reality it's five maps which are hidden and shown depending on click. I know, I know, it's sloppy and redundant code, but I was low on time and just needed it to work. Here's the code: