Your Electronic Books

a img {
border: 0;
border-bottom: 1px solid #ffffff;
}
a:hover img {
border-bottom: 1px solid #f22222;
}
In any case, you must always have usability and accessibility at the back of your mind when
working with image-based links. With regard to usability, is the image??™s function obvious?
Plenty of websites use icons instead of straightforward text-based navigation, resulting in
frustrated users if the function of each image isn??™t obvious. People don??™t want to learn
what each icon is for, and they??™ll soon move on to competing sites. With regard to
THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN
170
accessibility, remember that not all browsers can zoom images, and so if an image-based
link has text within it, ensure it??™s big enough to read easily. Whenever possible, offer a textbased
alternative to image-based links, and never omit alt and title attributes (discussed
earlier in this chapter). The former can describe the image content and the latter can
describe the link target (i.e., what will happen when the link is clicked).
Therefore, the example from earlier becomes the following:
?? src="linked-image.gif"width="40" height="40"
?? alt="Shopping trolley" />
Adding pop-ups to images
On occasion, when a user hovers their mouse cursor over an image, you might like to add
a pop-up that??™s a little more flamboyant than what a title attribute can provide.


Pages:
237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261