Information
With the redesign of this site, I have had several requests to show how the old pop-up screen shots were done, such that when you hovered over a menu link you had a screen shot of the destination. Also I have seen this done using javascript for links to external websites.
So this is a combination of both ideas but done using just CSS.
The basic idea is to have the image in the link along with the text, then use CSS to give the image a zero size (you could use visibility:hidden;). The link is given a position relative and a high z-index to enable you to place the pop-up image in an absolute positon 'relative' to the link and to ensure that the pop-up image is placed on top of any surrounding elements.
When you hover over the link the image is then given its correct size and it pops-up, in this case beneath the link, but you can place it anywhere you like relative to the link.
This works in IE5.01 (although the z-index is ignored), IE5.5, IE6, Firefox, Opera 9 beta (Opera 9 has a bug) and probably most modern browsers on a PC and Mac.
Thumbnail images courtesy of Webdesignbook Reference Book
23rd July 2006
Placing the <b> tag around the image and styling this instead make it sort of work in Opera.
Cascading Style Sheet
24th August 2006
Revised to make it work in Opera v9.01
a.screen, a.screen:visited {
color:#c00;
position:relative;
z-index:1;
}
a.screen b {
position:absolute;
visibility:hidden; /* hide the image */
width:200px; /* give it a width */
height:0; /* no height to solve an Opera bug that
makes it selectable when hidden */
border:1px solid #000; /* add a border */
left:0; /* position:the image */
top:-150px;
}
a.screen:hover {
text-decoration:none;
border:0; /* needed for this to work in IE */
z-index:1000;
}
a.screen:hover b {
visibility:visible; /* make the image visible */
height:150px; /* now give it a height */
cursor:pointer; /* for IE */
z-index:500;
}
a.screen:hover b img {
border:0; /* remove the link border */
}
The xhtml
The typical link:
<a class="screen" href="http://www.cssplay">this web site
<b><img src="http://webdesignbook.net/snapper.php?
url=www.cssplay.co.uk&w=200&h=150" alt="website image"
title="website image" /></b></a>
Copyright
You may use this method on your personal 'non-profit' web site without seeking my permission. A link back to CSSplay is always appreciated.
Commercial usage is also permitted without seeking approval, but I would ask that a donation is considered to support my work on CSSPlay.
If you are having problems integrating any of my demonstrations into your website then I now offer a service to fault find and correct any errors that you may have introduced. Please email me for more information.
Recommended Sites
- UK Game Server Hosting
- Host Color
Web Hosting for 30 Websites - Web design in Dorset
Bournmouth based web design agency - web hosting, dedicated servers
web reseller, managed servers - pay as you go e-commerce
Build your own SEO friendly webshop
