Programming with Images
Earlier in this book, I demonstrated the use of the Lightbox2 application that expands thumbnails while overlaying the existing page with a partially transparent background. Two elements make up this type of application.
The first is the semi-transparent overlay. In the last section, I covered issues of opacity, including managing the cross-browser differences. In that example, though, only pieces of the page were made semi-transparent, to de-emphasize the elements. With an overlay, an HTML element, usually a div, is set as semi-transparent in CSS and either hidden or made completely transparent when an image isn't being shown.
To use the thumbnail expansion program, a special class called thumb is added to the image thumbnails. Each thumbnail is surrounded by a link, so that if scripting is disabled, the larger images are still available:
<a href="largerimage.jpg"><img src="smallerimage.jpg" class="thumb" alt="some text" /> </a>
Two other div elements are added to the page. One, with an identifier of mtwCover, is used to surround the entire page contents. The easiest way to do this is to add the opening div element right after the opening body tag:
<body> <div id="mtwCover">
The ending tag for mtwCover and the other required element for the application are added in just before the closing body tag:
</div> <!-- end mtwCover --> <div id='mtwPicture'><img id='mtwPictureimage' class='mtwPictureimage1' src='http:// burningbird.net/wp/ajax-loader.gif' alt='' /></div> ...
Get Painting the Web now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
