Picturing It: Using Images
You can have a Web page with nothing but words on it, but most people think that’s a bit dull. It’s pretty rare to find a site that’s not filled with images of one kind or another. When it comes to placing images on the World Wide Web, you need to use graphics files in one of three common formats: GIF, JPEG (also called JPG), or PNG. (Chapter 7 covers these file formats in more depth.)
Where do you get images? You can create them from scratch, or you can download ready-to-use files from some of the Web sites listed in Table 3-1. If you use other people’s images — and most Web designers do — make sure that you first read all the fine print on their Web sites. Unless it states otherwise, the original artist owns the copyright on an image. You can’t use it without permission. Fortunately, the vast majority of artists on the Web are eager to give that permission in exchange for nothing more than a link from your Web site back to theirs. This arrangement gives them free publicity and gives you free, high-quality artwork. Everybody’s happy.
| Web Site Name | Web Address |
|---|---|
| Animation Arthouse | www.animation.arthouse.org |
| Barry’s Clipart Server | www.barrysclipart.com |
| Clipart Connection | www.clipartconnection.com |
| CoolArchive Free Clip Art | www.coolarchive.com |
| Graphic Maps | www.graphicmaps.com/clipart.htm |
If the artist isn’t willing to let you display copyrighted art in exchange for a link, you may need to pay to use the image. Sometimes, too, the image is free to use on noncommercial sites but costs money to use on commercial ones. To reemphasize the point, make sure that you read the fine print. Don’t — I repeat, don’t — just grab an image that’s not free, use it, and figure that you can get away with it. You can do that — after all, you can download any image that you can see in a Web browser — but you’re cheating the artist and running the risk of serious repercussions, like federal charges. Plenty of freely available art is out there. Stick with it, and you’re unlikely to run into problems.
Images
The most common item other than text on Web pages is the image, represented by the IMG element. The only absolutely required attribute for that element is the src attribute, which specifies the name and, if the file is located somewhere other than in the same directory as the HTML file that links to it, the location of the graphics file.
Thus, you code the simplest image on a Web page (see Figure 3-8) like this:
<IMG src="seated16.jpg"> 
To specify a graphics file in another folder, you need to add the path to the folder, as in the following example:
<IMG src="pets/seated16.jpg"> If the graphics file is on another Web server entirely, you need to add the full path to that URL, as follows:
<IMG src="http://www.anotherserver.com/seated16.jpg"> I mention in the section “Creating Links,” earlier in this chapter, that you can use an image as a link just as you can use text for one. To do so, just put the IMG element right between the start and end tags for the A element, as the following example shows:
<A href="http://www.dummies.com/"><IMG src="seated16.jpg"></A> 
IMG elements don’t have an end tag.
Background images
A background image follows the same rules as a regular image, except that you create it by using the background attribute of the BODY element rather than an IMG element, as shown in the following example:
<BODY background="guitar2.jpg"> Background images tile, which means they repeat themselves across the page until they reach the edge of the screen. Then they begin tiling again in the next available space below the first line of images and so on, until they fill the entire page from side to side and top to bottom. Because of this characteristic, most people prefer to use small background images, like the guitars shown in Figure 3-9.
Choose background images with care. Make sure that they don’t interfere with the other elements on the Web page. You want the color muted, the lines indistinct, and the content supportive of the overall theme.
Image maps
Image links are discussed in the preceding sections on linking and images. However, you can also use a special kind of image link called image mapping. If you use a normal image link, you have one link that goes with one image. By using image mapping, you can add several links to a single image.
By using an image-mapping program, you draw shapes over specific areas within an existing image. You then assign a particular URL to each of these areas. When visitors click the part of the image that links to a URL, they’re sent to that URL. You may, for example, use a map of the world as your image map. When your visitors click England or Scotland, they go to a page about the U.K. If they click Africa, they go to a page about that continent. And so on and so on. . . .
You don’t need to stay purely geographical, however. You can just as easily take a diagram of the human body and click the abdomen to go to a page about appendectomies or click the mouth to go to a page about dentistry. Any kind of logical connection works with image maps.
Many graphics programs, such as Fireworks, include image-mapping capabilities. If you don’t own one of those programs, you may want to check out some of the image-mapping programs that are listed in Table 3-2.
| Program | Web Address |
|---|---|
| CoffeeCup Image Mapper | www.coffeecup.com/image-mapper |
| Image Mapper | www.pcoward.com/imagemapper |
| Mapedit | www.boutell.com/mapedit |