Practical Uses for Images | How to Do Everything with HTML & XHTML

You can use images purely for decoration, but they also have many practical uses on a Web page. Images can serve as links, backgrounds, buttons, watermarks, and much more.

Use an Image as a Link

You can use an image as a link by placing the <img /> element between a set of anchor <a> tags. This will create a link in much the same way that text becomes a link when placed inside this element.

<a href="http://www.linksite.com">    <img src="/books/4/238/1/html/2/image.gif" /></a>

Those who come to your site through a nongraphical, nonvisual browser will need some other way to navigate. You can make things easier for them by including a text link with the image. Inserting the text between the <a> tags accomplishes this, as shown in the following illustration:

<a href="flowerpage.htm".>   <img src="/books/4/238/1/html/2/image.gif"alt="Link to flower site" />   Click to go to my flower page.</a>.

click to expand

Note

If your image is a link, a border is automatically drawn around it. If you do not want a border around a linked image, you must specify border="0".

Insert a Background Image with background (Deprecated)

You can insert a background image on your page by using the background=" " attribute inside the opening <body> tag. The browser will then “tile” the image to fill up the page. To use the background created earlier in this chapter as the wallpaper for a page, the opening body tag would look like this:

<body background="image.gif">

Tip

Don’t choose garish or harsh-looking images or patterns for backgrounds. You might think they look really good, but unless your content is incredibly compelling (and sometimes not even then), your visitors will not be back for a second visit. Remember, your content is the most important part of your Web site, not your background.

The image, whatever it is, will fill the page and scroll right along with the page’s content. But what if you would like to have your company’s logo remain stationary on the page, where your visitors can always see it? For that you need to create a watermark.

Create a Watermark Effect with bgproperties (Deprecated)

If you would like to create a watermark effect, you use an additional attribute in the <body> tag, called bgproperties. This attribute allows the background to remain stationary while the page’s content scrolls. To create this effect, make the following change to your <body> tag:

<body background="image.gif" bgproperties="fixed">

Note

Until recently, this attribute was supported only in Internet Explorer and Opera; Netscape 6 now supports the watermark effect. However, older Netscape browsers still ignore this attribute and scroll the background.