Alt-Web Design & Publishing
Pure CSS Disjointed Image Rollovers
(aka CSS Tooltips)

Description:

Mouse over the browser icons below to reveal absolutely positioned span tags. This disjointed rollover method relies on pure CSS without need for JavaScript behaviors. Therefore, it will work even when JavaScript is disabled. Also works with the tab key for people who may be unable to use a mouse. Tested and works in FF3.6, IE6+, Opera 10, Safari 4 and Chrome.

Example: (mouse over browser icons)

How I survived a computer disaster

 

Spam Filter - Free Trial

CSS Code

#rollover a {
border:none;
text-decoration:none;
padding: 0 0.5em 0 0.5em; /**space between icons**/
position: relative; /**remove position rule if full size images will share the same display area. **/
}

#rollover a span {
visibility:hidden;
background-color: #FFF;
display:block;
position: absolute;
/**adjust positioning of full size images in px or %**/
left: 0px;
top: -140px;
/**optional image captions**/
font-size: 12px;
line-height: 1.2;
color:#666;
text-align: center;
/**optional image borders & padding**/
border: 5px solid orange;
padding: 5px;
}

#rollover a:hover span, #rollover a:active span, #rollover a:focus span {visibility:visible;}

#rollover a:hover, #rollover a:focus
{visibility:visible;}


Lunarpages.com Web Hosting

HTML Code

<!--begin disjointed rollovers -->

<div id="rollover">

<p>
<a href="#"><img src="SmallIcons/image.png" alt="" /><span><img src="FullSize/image.jpg" alt=" " /><br />optional caption #1</span></a>

<a href="#"><img src="SmallIcons/image.png" alt="" /><span><img src="FullSize/image.jpg" alt=" " /><br />optional caption #2</span></a>

<a href="#"><img src="SmallIcons/image.png" alt="" /><span><img src="FullSize/image.jpg" alt=" " /><br />optional caption #3</span></a>
</p>

</div>

<!--end disjointed rollovers -->

 
 
    bookmarks