HTML and CSS Reference
In-Depth Information
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
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
Search WWH ::

Custom Search