Completed files fake-image-map.html and fake-image-map.css in the chapter 5
folder, along with the image files, which are unchanged.
1. Add the structure for the fake image map. In the body of the HTML document, add
the following code, which structures the content for the fake image map. Note
how the unordered list has a unique class value and how each of the list items has
a class value referring to the hot-spot relating to a specific item on the image.
Hover your mouse cursor over the sheep!
2. Set page defaults. Add some padding to the existing body rule:
body {
font: 62.5%/1.5 Verdana, Arial, Helvetica, sans-serif;
padding: 20px;
}
3. Add the following rule to style the unordered list. The font and text-transform
property values define the font styles for the captions. The background value
defines the grayscale image as the background for the list, and the width and
height values ensure the list??™s dimensions are the same as that of the background
image. The position property is set to relative because this enables the list item
positioning to then be set from the top left of the unordered list, rather than from
the top left of the browser window.
.sheepImageMap {
font: 1.
Pages:
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270