Results 1 to 4 of 4
Thread: Dynamic CSS and Image Maps
Oct 1, 2004, 09:34 #1
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.
Oct 1, 2004, 11:31 #2
- Join Date
- Jun 2004
- 0 Post(s)
- 0 Thread(s)
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.
Oct 1, 2004, 11:42 #3
- Join Date
- Jan 2003
- Hampshire UK
- 183 Post(s)
- 6 Thread(s)
Well you could obviously float anchors over the map similar to this example:
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
Oct 1, 2004, 12:13 #4
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:
<area shape="polygon" coords="423,147,423,152,474,154,474,147" href="/participants.php?SID=40" alt="Rhode Island"></area>
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.