Graphic Links

Links can be triggered by graphic images by enclosing an <img> tag inside an <a> tag. The general format for assigning links to graphic images is shown below.

<a href="url"><imgsrc="url" alt="text"></a>
Listing 7-11. General format for graphic link.

Images are particularly effective for links since, with informative graphics, you can tell at a glance the site destinations. The links coded in Listing 7-12 and shown in Figure 7-11 are made from images taken from their associated sites.

    <style>
      img  {border:0; vertical-align:middle}
    </style>

    <p>
        <a href="http://www.ebay.com"><img src="ebay.jpg" alt="eBay Link"/></a>
        <a href="http://www.ebay.com">Ebay</a>
    </p>

    <p>
        <a href="http://www.nascar.com"><img src="nascar.jpg" alt="NASCAR Link"/></a>
        <a href="http://www.nascar.com">NASCAR</a>
    </p>

    <p>
        <a href="http://www.weather.com"><img src="weather.jpg" alt="Weather Link"/></a>
        <a href="http://www.weather.com">The Weather Channel</a>
    </p>

    <p>
        <a href="http://www.microsoft.com"><img src="microsoft.jpg" alt="Microsoft Link"/></a>
        <a href="http://www.microsoft.com">Microsoft</a>
    </p>

Listing 7-12. Code to create graphic and text links.

Figure 7-11. Graphic and text links.

By default, the link graphic is surrounded by a border to indicate that it is a link, and it serves the same purpose as the underline style of text links. In this example, the border is suppressed by including a style sheet to set image borders to 0px in width.

When using graphic images as links, it is also a good idea to provide text links as well. This is done in the current example by including separate text links which are aligned at the middle of their associated images through the style sheet vertical-align property.

Recall that a remote Web site should be opened in a separate browser window so that the user remains in contact with your site. The above links are modified in the following code to open them in a new browser window using the target attribute described previously.

    <style>
      img  {border:0; vertical-align:middle}
    </style>

    <p>
        <a href="http://www.ebay.com" target="_blank"><img src="ebay.jpg" alt="eBay Link"/></a>
        <a href="http://www.ebay.com" target="_blank">Ebay</a>
    </p>

    <p>
        <a href="http://www.nascar.com" target="_blank"><img src="nascar.jpg" alt="NASCAR Link"/></a>
        <a href="http://www.nascar.com" target="_blank">NASCAR</a>
    </p>

    <p>
        <a href="http://www.weather.com" target="_blank"><img src="weather.jpg" alt="Weather Link"/></a>
        <a href="http://www.weather.com" target="_blank">The Weather Channel</a>
    </p>

    <p>
        <a href="http://www.microsoft.com" target="_blank"><img src="microsoft.jpg" alt="Microsoft Link"/></a>
        <a href="http://www.microsoft.com" target="_blank">Microsoft</a>
    </p>

Listing 7-13. Code to open graphic and text links in a separate browser window.

Web Development Tutorials

Graphic Links

TOP | NEXT: Image Maps