Below is a sample image map that's built entirely using CSS and XHTML. While I've added support
for Javascript (item titles are simply displayed beneath the image), I've disabled it in this example
-- I've run into a bit of a problem when JS is enabled and CSS is disabled (more details below).
The initial idea for this came from a blog posting I read over at Gina Trappini's blog, Scribbling.net. Her example was well done, but I wanted to attempt the same (or similar) using only CSS.
I then found a link to The Daily Kryogenix site (via Gina's post) that led to an image map that made use of ligher DHTML, and made use of the <title> tag to display notes about a hotspot.
Still, somewhat dependant on Javascript/DHTML.
In the end, I decided to make use of Doug Bowman's
Sliding Doors technique combined with a
definition list (<dl></dl>).
The sliding doors technique allows you to contain all your image rollover effects in one image file,
and make use of the background-position CSS property to "shift" the image in any
direction. By adding a :hover effect to your CSS (in this case to the
<a> tag contained within the <dd> tag), you can shift the image to a desired position.
What I did was build the image map in Photoshop. As you can see by this image, the map is made up of 3 copies of the same image, each with different markings. The top (1 of 3) simply marks the hotspots with numbers, and middle and bottom images (2 and 3 of 3) each contain the rollover effects (white transparancy). You may be wondering why the rollover effect is separated into two separate images. The reason for the separation is due to the overlap in adjacent items (ie: the monitor, the notebook and the floppy disk on the desk). Rather than having a collision between the two items, the rollover effects for neighboring items were separated onto multiple copies of the same image.
Essentially, the way this works is by placing the title of the item hotspot into the definition-term
tag (<dt></dt>) of your list, followed by the description in the
definition-description tag (<dd></dd>). The CSS then hides the definition-term
(which is really used for when CSS is disabled), as well as the definition-description (displayed upon hover of the anchor) and
displays the definition description (in this case, the description of the hotspot(s) you've chosen for
your imagemap), and absolutely positions and displays the description upon rolling over the hotspot
(also defined in the CSS).
The code also degrades gracefully. An <img> tag, which displays a non-mapped version of the image map, is hidden
using CSS. For those who have CSS disabled, the mapped version of the image (3-piece image) does not display, since it is part of the
background CSS property. Rather the non-mapped version will display, along with an unstyled definition list. If you've
got the Web Developer extension for Firefox,
go ahead and disable styles. You'll get a better idea of the degredation.
A sample of the code is displayed below (view source for full CSS and XHTML):
