CSS Tutorial : Image maps

Image maps enable you to define multiple links within a single image; for example, if you
have a weather map, you could use an image map to link to each region’s weather forecast;
or if you had a picture of your office, you could use an image map to make each of
the objects clickable, leading to pages explaining more about each of them. Clickable
regions within image maps can be fairly basic—rectangles or circles—or complex polygonal
shapes. Note that there are both server-side and client-side versions of image maps—
server-side image maps are now considered obsolete and pose accessibility problems, and
even client-side image maps tend to be avoided by most designers, although use of alt text
can help them become reasonably accessible.
Regardless of the complexity of the image and the defined
regions, the method of creating an image map remains the
same. To the right is the image used in this section to show
how a basic image map is created. It contains three geometric
shapes that will be turned into clickable hot-spots.
The image is added to the web page in the usual way (and
within a block element, since img is an inline element), but
with the addition of a usemap attribute, whose value must be
preceded by a hash sign (#).

<div id="wrapper">
<img src="image-map-image.gif" alt="Shapes" width="398" height="398"
å usemap="#shapes" />
</div>
The value of the usemap attribute must correlate with the name and id values of the associated
map element. Note that the name attribute is required for backward compatibility,
whereas the id attribute is mandatory.
<map id="shapes" name="shapes">
</map>
The map element acts as a container for specifications regarding the map’s active areas,
which are added as area elements.
<map id="shapes" name="shapes">
<area title="Access the squares page." shape="rect"
å coords="29,27,173,171" href="square.html" alt="A square" />
<area title="Access the circles page" shape="circle"
å coords="295,175,81" href="circle.html" alt="A circle" />
<area title="Access the triangles page" shape="poly"
å coords="177,231,269,369,84,369" href="triangle.html"
å alt="A triangle" />
</map>
Each of the preceding area elements has a shape attribute that corresponds to the
intended active link area:
rect defines a rectangular area; the coords (coordinates) attribute contains two
pairs that define the top-left and bottom-right corners of the rectangle in terms of
pixel values (which you either take from your original image or guess, should you
have amazing pixel-perfect vision).
circle is used to define a circular area; of the three values within the coords
attribute, the first two define the horizontal and vertical position of the circle’s
center, and the third defines the radius.
poly enables you to define as many coordinate pairs as you wish, which allows you
to define active areas for complex and irregular shapes—in the previous code
block, there are three pairs, each of which defines a corner of the triangle.
Creating image maps is a notoriously tedious process, and it’s one of the few occasions
when I advise using a visual web design tool, if you have one handy, which can be used to
drag out hot-spots. However, take care not to overlap defined regions—this is easy to do,
and it can cause problems with regard to each link’s active area. If you don’t have such a
tool handy, you’ll have to measure out the coordinates in a graphics package.

**Note:  that some browsers will place a border around the image used for an
image map. This can be removed by using CSS to set the image’s border to 0
(either via applying a class to the image, or via a contextual selector).

Adding a pop-up to an image

1. Create a container for the pop-up. Add the div shown following to the web page,
within the wrapper; the div will act as a container for the pop-up.
<div id="popupContainer">
</div>

2. Add the main image in the usual fashion, placing it inside the div created in step 1.
<img src="add-a-pop-up-image.jpg" alt="Landscape" width="500"
å height="375" />

3. Add a link and pop-up content. Surround the image with a dummy link, and then
add a span element immediately after the image. Within this, place the pop-up
content, which can contain text and even other images. Text can be styled within
inline elements (strong, em, and anchors, for example). In this example, the span
contains an image, which will be floated right, and some text (which is truncated
for space reasons—the completed version in the download files is longer). To
ensure that the floated image is “cleared,” making the span’s background appear
behind it once styled, a clearFix class is added to the span start tag, and an associated
CSS rule created (in step 10). More on this float-clearing technique, along
with floats and clears in general, is given in Chapter 7.
<a href="#"><img src="add-a-pop-up-to-an-image.jpg" alt="Landscape"
å width="500" height="375" /><span class="clearFix"><img
å src="add-a-pop-up-pop-up.jpg" alt="Winter shot" width="126"
å height="215" />
The text for the pop-up goes here…</span></a>
4. Set defaults. At this stage, the page content is displayed in a linear fashion—large
image followed by small image followed by text—so some CSS is now needed. In
the CSS document, add some padding to the existing body element, ensuring the
page content doesn’t hug the browser window edges when you’re testing the page.
body {
font: 62.5%/1.5 Verdana, Arial, Helvetica, sans-serif;
padding: 20px;
}

5. Give the images a border. Add the following rule to apply a thin gray border to the
images on the page.
img {
border: 1px solid #666666;
}

6. Define the pop-up area size. Add the following rule to define the size of the popup
area (the width setting defines its width and display: block stretches the
active area of the link to the size of its container—the image). The other settings
override link defaults, making the text within the div and anchor black and not
underlined.
#popupContainer a:link, #popupContainer a:visited {
position: relative;
display: block;
width: 500px;
text-decoration: none;
color: #000000;
}

7. Make the pop-up invisible. Add the following rule to make the pop-up initially not
display onscreen (i.e., outside of the viewing area of the browser).
#popupContainer a span {
position: absolute;
left: -10000px;
top: -10000px;
}

8. Style the span element. The following rule styles the span element during the
hover state. The display property value of block defines the pop-up as a blocklevel
element, rather than an inline one, while the position setting of relative
overrides that set in the previous step (as do the left and top values). The width
setting defines a width for the pop-up. The negative margin-top setting pulls the
pop-up upward, so it no longer sits under the main image. The value is the same
as the height of the main image minus the vertical offset required. (If it were set to
the height of the main image, the pop-up would sit flush to the top of the image
during the hover state, which looks cluttered.) The margin-left value provides a
horizontal offset, while the padding value places some padding within the span, so
its contents don’t hug its borders. The other settings style colors and fonts.
#popupContainer a:hover span, #popupContainer a:focus span,
å #popupContainer a:active span {
display: block;
position: relative;
left: 0;
top: 0;
width: 360px;
color: #000000;
font: 1.1em/1.5 Arial, Helvetica, sans-serif;
margin-top: -335px;
margin-left: 50px;
padding: 20px;
background-color: #e0e4ef;
border: 1px solid #666666;
}

9. Next, a rule is needed to float the image within the span. The margin settings
ensure that the image doesn’t hug the text-based content.
#popupContainer a:hover span img, #popupContainer a:focus span img,
å #popupContainer a:active span img {
border: 1px solid #666666;
float: right;

margin-left: 15px;
margin-bottom: 5px;
}

10. Apply the clearFix rule. Floated elements are outside the standard document
flow. Therefore, if there’s little text, the image appears to stick out of the span box,
as shown in the following example.
This can be fixed by adding the following rule (this technique is fully explained in
Chapter 7):
.clearFix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

**Note:  Because of a bug in Internet Explorer pre-version 7, you need to add the following
rule to make the pop-up work in Internet Explorer 6 or 5.5: #popupContainer a:hover
{text-indent: 0;}. Ideally, this should be added in a style sheet linked via a conditional
comment—see Chapter 9 for more on hacks for old browsers.

Enhancing skip navigation with a background image

1. Position the skipNav div. Add the following link to remove the skipNav div from
the document flow and position it at the top of the web page. The width and
text-align property values stretch the div to the full width of the browser window
and center the text horizontally, respectively.
#skipLink {
position: absolute;
top: 0;
left: 0;
width: 100%;
text-align: center;
}
2. Style the skip navigation link. Add the following rule to style the link within the
skipLink div. By setting display to block, the active area of the link stretches to
fill its container, thereby effectively making the entire containing div clickable. The
padding-bottom setting is important, because this provides space at the bottom of
the div for displaying the background image used for the hover state, added in the
next step. The color value is black (#000000) at this point, which ensures that the
text fits happily within the space available above the page content. (This may
change for users with non-default settings, but for the default and first zoom setting,
it’ll be fine.)
#skipLink a:link, #skipLink a:visited {
display: block;
color: #000000;
font: 1.0em Arial, Helvetica, sans-serif;
padding-top: 5px;
padding-bottom: 20px;
}

3. Recolor the skip navigation link. Change the color property so that the link blends
into the background.
#skipLink a:link, #skipLink a:visited {
display: block;
color: #fefefe;
font: 1.0em Arial, Helvetica, sans-serif;
padding-top: 5px;
padding-bottom: 20px;
}
4. Define the hover and focus states. Add the following rule to set the style for the
hover and focus states. This essentially makes the text visible (via the color setting)
and defines a background image—a wide GIF89 image with a downwardfacing
arrow at its center now appears when the user places their mouse cursor
over the top of the web page.
#skipLink a:hover, #skipLink a:focus {
color: #000000;
background: url(skip-navigation-down-arrow.gif) 50% 100% no-repeat;
}