In cases like those, absolute positioning
and offsetting both vertically and horizontally works well.
USING LINKS AND CREATING NAVIGATION
179
5
6. Add the following rule to style the list items, removing the default bullet point (via
the list-style value of none) and defining them to be positioned in an absolute
manner and displayed as block elements.
.sheepImageMap li {
list-style: none;
position: absolute;
display: block;
}
7. Create the first hot-spot. In a graphics package, four values are required for each
hot-spot: its width, its height, and the distance from the top and left corners. These
are then translated, respectively, into the width, height, left, and top values in a
rule applied to the relevant hot-spot:
.sheepOne {
width: 80px;
height: 104px;
left: 60px;
top: 50px;
}
Two more rules complete the effect. The first ensures the relevant anchor has the
correct height (note how the height value is the same as in the previous rule):
.sheepOne a {
height: 104px;
}
The second rule sets the color version of the image to be displayed as a background
on the hover state (as in, when the user mouses over the hot-spot area, the
relevant area is displayed in color). By default, the top left of the image will be
shown, and so negative positioning values are used to pull it into place. Note how
these are the negatives of the values defined for left and top in the .sheepOne
rule, minus 1 further pixel. The reason for the extra pixel is to take into account the
1-pixel border defined in step 5.
Pages:
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272