CSS Image Map
To the left we have an interactive map built entirely with our ol' pals, HTML and CSS.
We start with an image - in this case, a population map of Connecticut (download) and create a standard 'image map'.
The HTML code:
Your CSS file will include several elements that are customizable to your tastes. Font, color, dimensions, design - you know what to do.
First we define our image map and list. The width and height for #map should be equivalent to your image size. Also, be sure to provide the correct URL for where your image resides. The map list code is provided to prevent your browser from adding any additional default formatting.
Next we have our links. This code tells them to be absolutely positioned block elements and to hide the span inside your links.
Moving on to something more fun, we design the mouse over effect. Feel free to get creative here by changing the size, color, opacity, etc.
And finally, we must include the last bit of code that creates the image map - the dimensions of the links themselves. Grab the XY coordinates to the top left corner of the area you want for each link. Then determine the width and height of the link area.
All done! The final result should act similarly to the map seen above. This is by no means the most efficient way to create an interactive map but is a simple and decent alternative.
Much thanks to CSS How To for showing me this trick. See also A More Accessible Map for yet another example of a CSS Map.
If you have questions, feel free to contact me at kyamazaki@mapkist.com.