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.