Your Electronic Books

Using
CSS, you can add a fully stylable pop-up to an image, when the user moves their cursor
over it. Note, however, that this technique should be used sparingly, and you should never
rely on users accessing this information, unless you make it clear that the pop-up exists??”
for example, you could use it for a game, showing the answer to a question when the user
mouses over an image. (However, if something is extremely important for your users to
see immediately, don??™t hide it away in a pop-up??”display it in plain sight.) The following
walkthrough shows you how to use pop-ups in such a way.
Required files XHTML-basic.html and CSS-default.css from the basicboilerplates
folder as a starting point, along with the two image
files add-a-pop-up-image.jpg and add-a-pop-up-pop-up.jpg
from the chapter 5 folder.
What you??™ll learn How to create a totally CSS-based pop-up that can be applied to
an image.
Completed files add-a-pop-up.html and add-a-pop-up.css in the chapter 5
folder, along with the two images, which remain unchanged.
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.

2. Add the main image in the usual fashion, placing it inside the div created in step 1.
?? height="375" />
Adding a pop-up to an image
USING LINKS AND CREATING NAVIGATION
171
5
3.


Pages:
238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262