Section 2: 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.