HTML and CSS Reference
In-Depth Information
The Lake Tahanna Tourism home page will use a client-side image map. The
HTML code to add the image thus will use attributes of the <img> tag — src, width,
height, alt, and usemap — as follows:
Image Width
and Height
As you have learned in
earlier projects, specifying
the width and height
attributes helps improve
page loading time.
By identifying these
attributes in the HTML
code, the browser does
not have to determine the
width and height of the
image.
<img src=”tahanna.jpg” width=”774” height=”434” alt=”Lake
Tahanna” usemap=”#menubar” />
where the src attribute identifies the image, the width and height attributes define the
image size, and the alt attribute defines the text a screen reader will play.
The usemap attribute indicates to the browser which client-side image map will be
used for that image. The client-side image map is placed within the <map> tag and defines
the x- and y-coordinates of the areas on the image being used for the image map. When
adding the image to use as an image map, the value of the usemap attribute — in this
case, usemap="#menubar" — indicates that the browser should use the image map named
menubar as its image map source.
To Insert an Image to Use as an Image Map
The following step inserts an image to use for the image map.
1
•
If necessary, click line 14.
center image using
inline style in <div> tag
•
<div style=”text-align:
center”>
and then press
the
e n t e r
key.
Type
image inserted
within <div>
</div> container
•
Press the
t a b
key once and type
<img src=”tahanna.jpg”
width=”774” height=”434”
alt=”Lake Tahanna”
usemap=”#menubar”/>
and then press the
e n t e r
key.
usemap name
Figure 5-23
•
s h i f t
+
t a b
to move back to the left margin, type
</div>
, and then press the
e n t e r
key
twice (Figure 5-23).
I do not understand the purpose of the usemap attribute. Can you explain it?
The usemap attribute specifies an image as a client-side image map and associates the map
element's id with the image. The <map> tag that will be inserted at the end of this Web
page contains the coordinates of the image map. The usemap value (i.e., #menubar) tells the
browser that this is an image map, and that it needs to look at the <map> tag id with that
name (menubar) for the mapping coordinates.
Press
If I want to speed up the download of a large image, can I change the dimensions of the
image using the width and height attributes to make it smaller?
Although you can do this, you should not. Making a change to an image with these
attributes still forces the browser to download the entire image and then display it as
you indicate in the width and height attributes. If you want to speed up the download by
making the image smaller, you should use image editing software (such as Paint) to change
the dimensions and then save the image. In Paint, use the Resize button in the Image group
on the Home tab.
