USING LINKS AND CREATING NAVIGATION
173
5
margin-left: 15px;
margin-bottom: 5px;
}
10. Apply the clearFix rule. Floated elements are outside the standard document
flow. Therefore, if there??™s little text, the image appears to stick out of the span box,
as shown in the following example.
This can be fixed by adding the following rule (this technique is fully explained in
Chapter 7):
.clearFix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN
174
Image maps
Image maps enable you to define multiple links within a single image; for example, if you
have a weather map, you could use an image map to link to each region??™s weather forecast;
or if you had a picture of your office, you could use an image map to make each of
the objects clickable, leading to pages explaining more about each of them. Clickable
regions within image maps can be fairly basic??”rectangles or circles??”or complex polygonal
shapes. Note that there are both server-side and client-side versions of image maps??”
server-side image maps are now considered obsolete and pose accessibility problems, and
even client-side image maps tend to be avoided by most designers, although use of alt text
can help them become reasonably accessible.
Regardless of the complexity of the image and the defined
regions, the method of creating an image map remains the
same. To the right is the image used in this section to show
how a basic image map is created.
Pages:
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266