Images as Buttons

< Day Day Up >

One of the most important aspects of images, as previously discussed in Chapter 4, is how they can be combined with the a element to create buttons. To make an image "pressable," simply enclose it within an anchor.

  <a href="http://www.democompany.com"><img src="logo.gif"   alt="Demo Company" /></a>

When the page is rendered in the browser, clicking on the image will take the user to the anchor destination specified. Generally, to indicate that an image is pressable, the browser puts a border around the image, and provides some feedback to the user when the cursor or pointing device is over the hot area, such as turning the pointer to a finger or highlighting the text. For some basic feedback types, see Figure 5-16, which shows a border, finger pointer, and URL destination ”all indicating that the image is pressable.

Figure 5-16: Image as link feedback

One issue that might be troublesome for page designers is the border that appears around the image when it is made pressable. It is possible to turn this border off by setting the border attribute of the image equal to . Consider the following:

  <a href="http://www.democompany.com"><img src="logo.gif"   alt="Demo Company"  border="0" /></a>

Of course, without the border it may be difficult to determine which images on a page are links and which are not. This can cause users to play a little game of finding the active click region by running their mouse all over the screen. One way to avoid such usability problems is to provide visual cues in images that are made pressable. Although from a design perspective some of these effects, particularly drop shadows, are a little overused , there are tangible benefits to adding feedback information to button graphics. Another approach is to animate the buttons. Using a very simple piece of JavaScript, it is possible to animate a button so that when a mouse passes over an image it comes alive . A brief discussion about how Web pages can be made more dynamic using a scripting language such as JavaScript can be found in Chapter 14.

One nonbutton-oriented use of the border attribute is to put a simple stroke around an image. Many times people will use a graphics tool to create a frame on an image, but the border attribute is a bandwidth-cheap way to get much of the same effect. Try setting the border attribute equal to a positive value on a nonclickable image ”for example, < img src="portrait.gif" alt="" border="5" /> . Borders, particularly when added with CSS, which offers a much richer set of formatting possibilities, provide an easy way to frame an image.

< Day Day Up >