KALAYANTHANI

Pop-Up Images on Rollover

This tutorial will teach you how to make a pop-up image on hyperlinks using ONLY CSS. This Trick work on all platforms and OS. First you need to format your link itself:

view plaincopy to clipboardprint?

1. <a class="imPop" href="sample.html" title="sample">Sample  
2. <span><img src="thumb.jpg" width="64" height="64" alt="sample"  
3. border="0" /></span></a>  

Secondly, you need to define a class for the hyperlink, call it "imPop." You need to establish: relative positioning and z-index this way the pop-up image will load overtop of the page content instead of repositioning it.

1. a.imPop {  
2.    position:relative;  
3.    z-index:20;  
4. }  

Now you must define the hover effect for our "imPop" link container class:

1. a.imPop:hover {  
2.     display:inline;  
3.     z-index:30;  
4. }  

Here, you need to increase the z-index, so that any links you are hovering over will appear on top of any other nearby "imPop" links. In order to get the popup to work in IE, we need to set the display property of the link to "inline." Now we need to define the initial state for the span that contains our image thumbnail. All we want to do is hide it.

1. a.imPop span {  
2.     display:none;  
3. }  

Finally, you will need to define the hover effect for the span when our mouse is over its container class, "imPop." You need assign it a block-level display type and position it absolutly within "imPop," 1em from the top and 1em from the left. you will also specify the height and width of the span (equal to the height and width of our thumbnail).

1. a.imPop:hover span {  
2.     display:block;  
3.     position:absolute;  
4.     top:1em;  
5.     left:1em;  
6.     width:64px;  
7.     height:64px;  
8. }  

Users without CSS support will see the link text, followed by the thumbnail image. This is a rare occourance, and the link and image are both still readily accessible. 

Courtesy: http://www.code-sucks.com

Posted in: Blogger Tutorial