0em/1 Arial, Helvetica, sans-serif;
text-transform: uppercase;
background: url(fake-image-map-gray.jpg);
width: 500px;
height: 375px;
position: relative;
margin-bottom: 10px;
}
Using CSS to create a fake image map with rollovers
THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN
178
4. Style the links. By setting display to block, the links stretch to fit their container
(the list items). The text-indent setting is used to massively offset the indent of
the text within the links, effectively making the text invisible by default, but keeping
the element itself visible and clickable. The text-decoration value of none
turns off the default underline for the links.
.sheepImageMap a {
display: block;
text-indent: -100000px;
text-decoration: none;
}
5. Set hot-spot borders. Utilizing the :hover pseudo-class, the following rule makes it
so that when the list is hovered over, the three hot-spots show a 1-pixel border:
.sheepImageMap:hover .sheepOne, .sheepImageMap:hover .sheepTwo,
?? .sheepImageMap:hover .sheepThree {
border: 1px solid #000000;
}
In some circumstances, offsetting using text-indent can lead to minor layout issues.
This wouldn??™t be a problem in the layout being created here; but with more finely
tuned layouts, it could??”due to some browsers keeping the space taken up by the element??™s
height available to it, and thus forcing subsequent content to appear below
where it??™s meant to be by an equivalent amount.
Pages:
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271