The SitePoint Forums have moved.

You can now find them here.
This forum is now closed to new posts, but you can browse existing content.
You can find out more information about the move and how to open a new account (if necessary) here.
If you get stuck you can get support by emailing forums@sitepoint.com

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Dynamic CSS and Image Maps

Hi. I have a project where users can search for participants by state and county. They start with a U.S. map, click on a state, then get a map of all the counties for that state, then click on a county to get all the participants in that county.

I have all of the coordinates for the U.S. map and the individual state maps stored in a database so that only those states and counties with participants in them are clickable. That is, the hyperlinks with map coordinates only appear if there are participants. It's a very dynamic site so I need this whole process to be very automated.

Here's my problem, though. In the early going, the vast majority of counties (and states, for that matter) don't have any participants, so the user is required to mouse over the map looking for counties in which there are participants. There's no immediate visual clue. Kind of clumsy. Is there a way to use CSS, for example, to use the map coordinates to shade a state or county? In other words, since the hyperlink/coordinates only appear for states and counties where there are participants, can I somehow take advantage of that fact to dynamically color the state/county using CSS or some other means? Or even just put some sort of small icon superimposed over the appropriate county/state on the map?

It would be easy to use a simple list or drop-down menu, but unfortunately that doesn't meet my client's requirements. Thanks in advance for any help.

One possible solution is to use the z-index and place an image or icon, like ".", over the section with participants. You'd need a seperate icon for each coordinate with a specific id. Then just specify the top and left position for every id. I'm sure the more css savy members here can give you better solutions or more details on how to implement this one. I've only used z-index once before.

But I've no idea how you could integrate it into your database without adding more fields to the database to hold information about whether the link was active or not. I'm afraid that side of things is beyond me though

Hmmm... I see what you're saying. Unfortunately, I'm trying to do this without having to create any additional images. For example, Texas alone has 254 counties!

When the page is being dynamically generated, the database already knows which states/counties have participants in them, and the coordinates and HREF attributes are ONLY written to the HTML document for those that do. For example:

So, I'm looking for a way to distinguish any and all areas of the image that have coordinates, but without having to alter the image itself since this needs to be dynamic. So, if I have a U.S. map and the above coordinates are the only ones written to the HTML document (i.e. Rhode Island is the only state in which there are participants), wouldn't it be cool if I could simply set a background (or foreground) color for that <area> so that it would differ from the rest of the map (Rhode Island would have a different color), giving the user a visual cue that there are participants in that state? One CSS attribute could handle all states and counties. Or, if that's not possible, is there a way to use the coordinates to dynamically position some sort of icon - for example, a star - over the state of Rhode Island (in the above example), again providing a visual cue?

Which areas are clickable is not a problem. And, as one helper noted, I could use z-index to place something on top of the image map. It's the precise POSITIONING, however, that I can't figure out how to dynamically determine.

I realize this may not be possible, but does it at least make sense as I've described it? Thanks again.