Lesson 2: Embedding content CHAPTER 2 49
Quick check
■■You are creating several small icons that will be displayed on your webpage.
These icons will render as different shapes and will use transparent color. Each
icon uses a small number of colors. Which would be the best image file type for
this application?Quick check answer
■■Use the GIF format because it has transparent color support and because it
requires small numbers of colors.Creating image links
If you create a hyperlink and the hyperlink’s content is an <img> element, you have created
an image that can be clicked—an image link. Here is an example of an image link.
<a href="Investments.html"><img src="CurrencySymbol.png" /></a>Creating an image map
You can create a clickable image map on your HTML document by using the <map> element.
It contains <area> elements that define clickable regions on the image.
The <map> element has a name attribute that must be set. On an <img> element, set the
usemap attribute to the <map> element’s name to create a relationship between the image
and the map.
In the <map> element, you define <area> elements by using the shape, coords, href, and
alt attributes. The <area> element is a void element, so you use a self-closing tag. The shape
attribute is set to rect, circle, poly, or default, where default is an <area> element whose size
is the same as the image and is triggered if no specific <area> is defined for coordinates
where you clicked.
The coords attribute will contain x and y coordinates where 0, 0 is the top-left corner of
the image. The coords attribute is set according to the shape as follows.
■■rect x1, y1, x2, and y2 specify the coordinates of the left, top, right, and bottom.
■■circle x, y, and radius specify the coordinates of the center and the radius.
■■poly x1, y1, x2, y2,.., xn, and yn specify the coordinates of the edges. The first and last
coordinate pairs should be the same to close the polygon, but if they aren’t the same,
the browser will add a closing pair.
The href attribute is the same as the href attribute on the <a> element and can be set to
an absolute or relative URL.
The alt attribute is set to alternate text to be displayed and is required when the href attri-
bute is set.