ptg16476052298 LESSON 11: Using CSS to Position Elements on the Page
the example, I need to make two small tweaks to the CSS. I added a new rule to display
the overlay, and I hid the #note1 element by default. Here are the changes:
#note1 {
position: absolute;
border: 2px solid black;
width: 340px;
height: 300px;
top: 40px;
left: 40px;
text-align: right;
display: none;
}#picture:hover #note1 {
display: block;
}The result is that the overlay <div> is hidden unless the mouse pointer is over the image.
Note that I used the :hover pseudo-class with #picture. This ensures that the overlay
is displayed whenever the mouse is over the picture, rather than just when it’s over the
overlay.
In Lesson 9, “Using Images on Your Web Pages,” you were introduced to image maps.
You can also approximate image maps using positioning. For example, let’s say I want to
let users click the left side of the image in the previous example to move to the previous
image in a set, or the right side of the image to move to the next image.
The first step is to remove the overlay from the previous example and add the links that
I’m going to use:
<div id="picture">
<a href="/picture2.html" id="next">Next</a>
<a href="/picture2.html" id="previous">Previous</a>
<img src="monet.jpg">
</div>As you can see in Figure 11.6, the links appear in the normal flow above the image
because I haven’t positioned them yet.
First I’ll apply some styles to both of the links to get them to overlay the page.
#picture a {
position: absolute;
border: 3px double #333;
padding: 1em;
}