Visual Elements and Graphics - Web Development and Design Foundations with XHTML - page 142

FAQ

What if my images are in their own folder?

It's a good idea to organize your Web site by placing all your images in a folder separate from
your Web pages. Notice that the CircleSoft Web site shown in Figure 4.22 has a folder called
images, which contains a number of GIF files. To refer to these files in XHTML or CSS code,
you also need to refer to the images folder. The following are some examples:
● The CSS code to configure the background.gif file from the images folder as the page
background is as follows:

body { background-image: url(images/background.gif); }
● XHTML to display the logo.jpg file from the images folder is as follows:

<img src="images/logo.jpg" alt="CircleSoft" width="588"
height="120" />

Figure 4.22
A folder named
“images” contains
the graphic files

CHECKPOINT 4.2
1. Describe the CSS to configure a graphic named circle.jpg to display once in the
background of all <h1> elements. Code sample CSS to demonstrate this.
2. Describe the CSS that configures a file named bg.gif to repeat vertically down the
background of a Web page. Code sample CSS to demonstrate this.
3. Explain how the browser will render the Web page if you use CSS to configure both a
background image and a background color.

4.4 XHTML Images and More

This section introduces additional XHTML coding techniques associated with using
images on Web pages. Topics discussed include image maps, thumbnail images, and
image slicing.

Image Maps

An image map is an image that can be used as one or more hyperlinks. An image map
will have at least one clickable area and usually multiple clickable areas that link to
another Web page or Web site. The clickable areas are sometimes called hotspots . You
have probably used image maps many times but never realized it. One common use of