The
most common way of structuring this ???fake??? image map is by using an unordered list, placing
links within each list item, and using absolute positioning to set the locations of the
links. Further CSS trickery can be used to make all hot-spots visible when the mouse cursor
is placed over the image, and to change the image on the rollover state.
In the following exercise, a picture of three sheep minding their own business is going to
be used for the fake image map. When you mouse over the image, all three hot-spots will
be shown (as a 1-pixel, black border). Placing the cursor over a hot-spot will then turn that
portion of the grayscale image into color (by way of placing a second image as a background
on the hot-spot), along with showing a caption.
As you might imagine, with CSS being based around boxes, the technique tends to
work best with highly regular, box-shaped rollover areas.
Note that some browsers will place a border around the image used for an
image map. This can be removed by using CSS to set the image??™s border to 0
(either via applying a class to the image, or via a contextual selector).
USING LINKS AND CREATING NAVIGATION
177
5
Required files XHTML-basic.html and CSS-default.css from the basicboilerplates
folder, along with image files fake-image-mapcolor.
jpg and fake-image-map-gray.jpg from the chapter 5
folder.
What you??™ll learn How to fake an image map using CSS, which will enable two levels
of rollover.
Pages:
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269