Web Design - Design Elements: Introduction to Design - Typography and Navigation
Sections:  Introduction  |  Section 1  |  Section 2  |  Section 3
Section Two:  Part A  |  Part B  |  Part C  |  Part D  |  Part E  |  Part F  |  Part G

Hyperlinks In-Depth

Hyperlinks and Navigation

Thus far in the course you have been introduced to hyperlinks created with the HTML anchor <a> tag and text. Hyperlinks are the basis for all navigation in your web page. Navigational hyperlinks generally come in two formats:

  • Text
  • Image Maps

Image maps are images that have had a hyperlink applied to it; therefore if a user clicks on an image that has been transformed into an image map, the associated link will open a new page or asset of the page. Using image maps is a common method for creating a web site's global navigation scheme. For instance, web designers often create text-based images (images that include text) to be placed in the navigation bar of a web site. Hyperlinks are applied to these images - creating image maps and transforming the images into hyperlinks.

One caveat to using text-based images as hyperlinks is that images do not inherently provide users with navigation cues. For instance, text hyperlinks, created with the anchor <a> tag, have multiple states:

  • Hover
  • Active
  • Visited

These different states are meant to provide the user with information about the hyperlink. For instance, the hover state of the <a> tag informs the user that the link is in fact a link and not simple text. The active state of the <a> tag tells the user which link/page is currently active. Finally, the visited state of the <a> tag informs the user of links and/or pages he/she has already visited. Text-based images used as hyperlinks do not inherently provide this type of information; however, designers often mimic these states when using text-based image hyperlinks by creating multiple states of a text-based image and employing JavaScript rollover effects.

Next Next

© 2008 KCDL. All rights reserved.