If the borders weren??™t used (although they are
handy, since they show all the hot-spots), the positioning values would just be the
direct negatives of the left and top values from .sheepOne.
.sheepOne a:hover {
background: url(fake-image-map-color.jpg) -61px -51px;
}
THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN
180
8. Create the other hot-spots. The other two hot-spots are created in the same way as
the first one in step 7. Again, the positioning values in the hover states are negative
values minus 1 of the left and top values in the rules that defined the dimensions
and positions of the hot-spots.
.sheepTwo {
width: 200px;
height: 126px;
left: 141px;
top: 108px;
}
.sheepTwo a {
height: 126px;
}
.sheepTwo a:hover {
background: url(fake-image-map-color.jpg) -142px -109px;
}
.sheepThree {
width: 68px;
height: 38px;
left: 418px;
top: 19px;
}
Note that the a selector is used in this exercise rather than a:link. Because the rules
are strictly based on context??”anchors within the defined areas of the fake image
map??”this is acceptable, and it saves having to use both :link and :visited selectors.
USING LINKS AND CREATING NAVIGATION
181
5
.sheepThree a {
height: 38px;
}
.sheepThree a:hover {
background: url(fake-image-map-color.jpg) -419px -20px;
}
9. Add styles for the captions. In step 4, the text-indent property was set to a huge
negative value, which made the text effectively disappear. To bring it back on the
hover state, add the following rule to your CSS, which also colors the text in white:
.
Pages:
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273