Images and Links

Can an image serve as a link? Sure it can! If you include an <img> tag inside a link tag (<a>), that image serves as a link itself:

<a href="index.html"><img src="/books/2/631/1/html/2/uparrow.gif" alt="Up" /></a>

If you include both an image and text in the link tag, they become links to the same page:

<a href="index.html"><img src="/books/2/631/1/html/2/uparrow.gif" alt="Up" />Up to Index</a>


One thing to look out for when you're placing images within links, with or without text, is white space between the </a> tag and the <img> tag or between the text and the image. Some browsers turn the white space into a link, and you get an odd "tail" on your images. To avoid this unsightly problem, don't leave spaces or line feeds between your <img> tags and </a> tags.

By default in HTML 2.0, images that are also links appear with borders around them to distinguish them from ordinary, nonclickable images. Figure 7.11 shows an example of this. The butterfly image is a nonclickable image, so it doesn't have a border around it. The up arrow, which takes the visitor back to the home page, has a border around it because it's a link.

Figure 7.11. Images used as links have a border around them.

You can change the width of the border around the image by using the border attribute to <img>. The border attribute was a Netscape extension that became part of HTML 3.2, but it's been deprecated in HTML 4.01 in favor of style sheets. This attribute takes a number, which is the width of the border in pixels. border="0" hides the border entirely. This configuration is ideal for image links that actually look like clickable buttons, as shown in Figure 7.12.

Figure 7.12. Images that look like buttons.


Including borders around images that are links has really fallen out of favor with most web designers. Not turning them off can make your design look very dated.

Task: Exercise 7.2. Using Navigation Icons

Now you can create a simple page that uses images as links. When you have a set of related web pages, it's usually helpful to create a consistent navigation scheme that is used on all of the pages.

This example shows you how to create a set of icons that are used to navigate through a linear set of pages. You have three icons in GIF format: one for forward, one for back, and a third to enable the visitors to jump to the top-level contents page.

First, you'll write the HTML structure to support the icons. Here, the page itself isn't very important, so you can just include a shell page:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""> <html> <head> <title>Motorcycle Maintenance: Removing Spark Plugs</title> <h1>Removing Spark Plugs</h1> <p>(include some info about spark plugs here)</p> <hr /> </body> </html>

Figure 7.13 shows how the page looks at the beginning.


At the bottom of the page, add your images using <img> tags:


<img src="/books/2/631/1/html/2/next.gif" alt="Next" /> <img src="/books/2/631/1/html/2/back.gif" alt="Back" /> <img src="/books/2/631/1/html/2/uparrow.gif" alt="Up" />


Figure 7.13. The basic page, with no icons.

Figure 7.14 shows the result.


Figure 7.14. The basic page with icons.

Now add the anchors to the images to activate them:


<a href="replacing.html"><img src="/books/2/631/1/html/2/next.gif" alt="Next" /></a> <a href="ready.html"><img src="/books/2/631/1/html/2/back.gif" alt="Back" /></a> <a href="index.html"><img src="/books/2/631/1/html/2/uparrow.gif" alt="Up" /></a>

Figure 7.15 shows the result of this addition.

When you click the icons now, the browser jumps to the linked page just as it would have if you had used text links.


Figure 7.15. The basic page with iconic links.

Speaking of text, are the icons usable enough as they are? How about adding some text describing exactly what's on the other side of each link? You can add this text inside or outside the anchor, depending on whether you want the text to be a hot spot for the link as well. Here, include it outside the link so that only the icon serves as the hot spot. You also can align the bottoms of the text and the icons using the align attribute of the <img> tag. Finally, because the extra text causes the icons to move onto two lines, arrange each one on its own line instead:


<hr /> <p><a href="replacing.html"><img src="/books/2/631/1/html/2/next.gif" border="0" alt="Next" /></a> On to "Gapping the New Plugs"<br /> <a href="ready.html"><img src="/books/2/631/1/html/2/back.gif" border="0" alt="Back" /></a> Back to "When You Should Replace your Spark Plugs"<br /> <a href="index.html"><img src="/books/2/631/1/html/2/uparrow.gif" border="0" alt="Up" /></a> Up To Index </p>

See Figure 7.16 for the final menu.


Figure 7.16. The basic page with iconic links and text.

Sams Teach Yourself Web Publishing with HTML and CSS in One Hour a Day
Sams Teach Yourself Web Publishing with HTML and CSS in One Hour a Day (5th Edition)
ISBN: 0672328860
EAN: 2147483647
Year: 2007
Pages: 305

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