Popup overlay technique from CBSNews

Here is an interesting technique I saw on the CBS News website:

Popup Overlay Technique

Each thumbnail image has an outline with a little plus sign in the bottom right corner, to indicate that you can click the thumbnail to pop up a full-size image.

Rather than adding the icon to each thumbnail image, they created the outline and the icon as a transparent GIF. Then they specify the thumbnail image as a background which shows through the transparent parts.

Popup Overlay

<table border="0" cellpadding="0" cellspacing="0" height="131" width="175"><tbody><tr><td background="image653259l.jpg"><a href="javascript:launch('photo', 540, 400, 'main641817_popup0_2.shtml')"><img src="story_image_pop.gif" border="0" height="131" width="175"></a></td>

The only disadvantage of this technique is that it assumes that each thumbnail image is the same size. You could probably do something similar using CSS to add the border and position the plus icon to the bottom right of the image.

Leave a Reply