Hover link pop-up
Snippet Menu
7
Mon. Sep. 11th, 2006 5:21 PM
Basically a simple rollover that allows for a pop-up of either, a screenshot of the web page the link is going to, or of an image. No JavaScript. The image also becomes a link. I just thought this was handy. Hope you like!
a.shot, a.shot:visited {
color:#c00;
position:relative;
z-index:1;
}
a.shot b {
position:absolute;
visibility:hidden;
width:200px;
height:0;
border:1px solid #000;
left:0;
top:-150px;
}
a.shot:hover {
text-decoration:none;
border:0;
z-index:1000;
}
a.shot:hover b {
visibility:visible;
height:150px;
cursor:pointer;
z-index:500;
}
a.shot:hover b img {
border:0;
}
<!-- For example, the code for the link would look like this -->
<a class="shot" href="http://www.thewebbandit.com">this web site<br />
<b><img src="http://www.thewebbandit.com/images/thumb1.jpg"/></b></a>
Comments
Voting
Votes Up
Votes Down
There are currently no comments for this snippet.