Using an image as a hyperlink is easy: Instead of text, nest an img
element within an a
element.
(
a
Element In Bold, img
Element Underlined)
<p><a href="http://validator.w3.org"><img src="http://validator.w3.org/images/valid_icons/valid-html401.png" alt="Valid HTML 4.01"></a></p>
If used in a webpage, clicking on that particular Valid HTML 4.01 icon will take you to the W3C HTML valdiator. Making an image a hyperlink really is that simple.
Making only part of an image a hyperlink is a bit trickier, and requires the use of something called an image map.
Image Map Elements
The image map requires 3 types of elements:
- the image map element,
- the map area element,
- and the image element (discussed in the chapter on iline elements) with the addition of a special attribute.
The core and language attributes apply to all of these.
The Image Map Element
Element Name: map
This element contains the areas of the image map. It is a body element, and is one of the few that isn’t actually a block or inline element. In fact, you don’t see it at all (although it does cause a line break), only its effects.
Required Attributes:
- name
-
The
name
attribute identifies the map. Like theid
attribute, this must have a unique value amongstname
attributes, although anid
attribute may have an identical value. In other words, the following is perfectly valid:<map id="Image-Map" name="Image-Map">
This is actually a recommended method, as some browsers associate an
img
element with amap
element using themap
element’sid
attribute rather than thename
attribute. Why this is, I don’t know.
The Map Area Element
Element Name: area
The area
element is used to associate a URI with a specific area of the image.
Required Attributes:
- alt
- The
alt
attribute contains text. It has much the same role as thealt
attribute of animg
element.
Implied Attributes:
- href
- The
href
attribute contains a URI. It has much the same role as thehref
attribute of ana
element. - shape
- The
shape
attribute is an enumerated attribute. Your choices are:- default
- This specifies the entire image.
- circle
- This specifies a circular area (sorry, no ellipses).
- rect
- This specifies a rectangular area.
- poly
- This is short for
polygon
and specifies an area best described asnone of the above.
- coords
-
Short for
coördinates
, thecoords
attribute tells the browser where the shape is. While you technically can enter any data without raising a validator error, the only characters that you should use are numbers, commas, and spaces.The
coords
attribute is interpreted by the browser depending on the value of theshape
attribute. The numbers needed are listed in occurance from left to right and refer to the number of pixels.- circle
-
You need 3 numbers:
- The x-coördinate (horizonatal) of the center of the circle
- The y-coördinate (vertical) of the center of the circle
- The radius (distance from the center to the edge) of the circle
- rect
-
You need 4 numbers:
- The x-coördinate (horizonatal) of the left edge
- The y-coördinate (vertical) of the top edge
- The x-coördinate (horizonatal) of the right edge
- The y-coördinate (vertical) of the bottom edge
Another way to think of this is the coördinates of the upper-left corner and the coördinates of the lower-right corner.
- poly
- This is more compicated than the other two. Essentially, you use x-y coördinates to outline the shape you want. The browser
draws
a straight line from one coördinate to the next, and the last coördinate should be exactly the same as the first.
A good way to keep track of these numbers is to use a comma between x- and y- coördinates so that they’re in pairs.
- tabindex
- The
tabindex
attribute works exactly the same way as it does when used in aa
element, but is actually more useful here, since it may not be obvious where a hyperlink actually is.
Modifying The Image Element
To associate an img
element with a map
element, simply include the usemap
attribute with the img
element you want to associate with the image map. The contents of the usemap
attribute should match the contents of the name
attribute of the desired map
element, except with a hash mark in front.
In other words, if the value of the name
attribute of the image map is Image_Map
, the value of the img
element’s usemap
attribute should be #Image_Map
.
One warning: While more than one image can use the same map, don’t try to associate more than one map with the same image. The most likely result is that the image won’t use any of them.
Image Map Example
(Square In Dark Green, Triangle In Dark Blue, Circle In Dark Red)
<p>In the image map below, clicking on the green square will take you to the <abbr title="World Wide Web Consortium">W3C</abbr> <abbr title="HyperText Markup Language">HTML</abbr> validator; the blue triangle to the <abbr title="HyperText Markup Language">HTML</abbr> 4.01 specification; and the red circle to the <abbr title="World Wide Web Consortium">W3C</abbr> homepage. The <code class="att_name">title</code> attributes cause tooltips to appear when I hover the mouse cursor over each area, which is handy for figuring out what shape leads where.</p>
<div>
<img id="Mapped_Image" src="../../image.PNG" alt="Image Map" usemap="#Image_Map">
<map id="Image_Map" name="Image_Map">
<area
alt="W3C Validator"
shape="rect"
coords="16,8 69,56"
href="http://validator.w3.org"
tabindex="1"
title="W3C Validator"
>
<area
alt="HTML 4.01 Specification"
shape="poly"
coords="118,22 118,89 185,89 118,22"
href="http://www.w3.org/TR/html401/"
tabindex="2"
title="HTML 4.01 Specification"
>
<area
alt="W3C Homepage"
shape="circle"
coords="72,155 36"
href="http://www.w3.org"
tabindex="3"
title="W3C Homepage"
>
</map>
</div>
Yes, it is perfectly acceptable to space multiple attributes out like I did above to make them more readable.
Image Map Drawbacks
While image maps give an entertaining option to website design, they hold some drawbacks.
One drawback is determining where to set the areas, which can take some experimentation (particularly in the case of polygons).
Another is if the image is set at a different size than it used to be (which can happen), the browser will not reinterpret the coördinates; you then have to recode them yourself.
If The Image Doesn’t Appear
Possibly the most serious drawback is if the image does not appear at all, the image map is useless. But there is a way around this: Instead of using area
elements inside the map
element, use a list of a
elements (an unordered list is probably best).
The result is this:
The changes necessary are minor. The only area
-specific attribute explained in this chapter that may not be used in an a
element is alt
, but the a
element contains text anyway. The resulting code would look like this (I will truncate it to just the map and a single area
-to-a
replacement for clarity’s sake).
(Square In Dark Green)
<map id="Image_Map" name="Image_Map">
<ul>
<li><a
shape="rect"
coords="16,8 69,56"
href="http://validator.w3.org"
tabindex="1"
title="W3C Validator"
>W3C Validator</a></li>
<!-- Replace other area elements in a similar manner -->
</ul>
</map>
About the only drawback to this is that the rendering of the tabindex
attribute becomes problematic in some browsers.