Using Images to Label Links

In this age of graphical interfaces, people are used to clicking on images and icons to make things happen. Adding an image to a link creates a navigational button that the visitor can click to access the referenced URL. (For more information about images, see Chapter 5, Images.)

Figure 6.22. I've removed the border from all the image links.

To use images to label links:


Type <a href="destination.html">, where destination.html is the URL of the page that the user will jump to when they click the button.


Type <img src="/books/2/62/1/html/2/image.jpg" where image.jpg gives the location of the image file on the server.


If desired, type border="n", where n is the width in pixels of the border. Use a value of 0 to omit the border.


Add other image attributes as desired and then type the final />.


If desired, type the label text, that is, the text that will be underlined or highlighted in blue, that when clicked upon will take the user to the URL referenced in step 1.


Type </a> to complete the link.

Figure 6.23. The images act just like clickable text. The alt text can indicate where the link is leading.


  • If you invert steps 5 and 6, only a click on the image will produce the desired jump. A click on the text has no effect. (You can also leave the text out altogether.)

  • Most browsers surround clickable images with a border of the same color as the links (generally blue). For no border, use a value of 0 in step 3. Note that the border attribute is deprecated for images. You can use CSS instead (see page 184).

HTML, XHTML, & CSS(c) Visual QuickStart Guide
HTML, XHTML, and CSS, Sixth Edition
ISBN: 0321430840
EAN: 2147483647
Year: 2004
Pages: 340

Similar book on Amazon © 2008-2017.
If you may any questions please contact us: