Disjointed Rollover

A dis-jointed rollover is when you rollover some text or an image and something appears somewhere else on the page. This can easily be done by displaying a hidden element when the anchor text is hovered. (Unfortunately IE6 (and less) only understand hovers on anchors so we can only use this technique on links if we want to support ie6 etc (note: ie7 does understand hover on elements other than anchors).)

First a simple example - roll your mouse over the following Rollover here please. As you can see a nice little message box appears over the text and provides some more information..

Code:

.example1 a{position:relative;}/* set stacking context*/
.example1 a span{
top:-999em;/* hide message initially*/
position:absolute;
left:-70px;
width:250px;
padding:5px;
background:#829900;
color:#fff;
border:2px inset green;
}
.example1 a:hover{visibility:visible}/* ie bug needed to make span show*/
.example1 a:hover span{top:-66px;}/* reveal image*/

The code for this couldn't be simpler and starts simple enough by declaring the anchor to be position:relative. This will allow us to position the span that holds the text in relation to this anchor at an absolute position from the anchor. The span is hidden by default with an absolute position of top:-999emwhich hides it above the viewport and when the link is hovered the span is brought back into view with top:0 and the element is revealed. Display:block and display:none (or visibility:visible/hidden) could be used but ie6 is a little buggy on occasions when things are a little more complex with it so the absolute position is safer. As the elements are absolutely placed they are removed from the flow anyway and we don't need to worry about affecting other content.(Note Opera browsers are quite buggy with this technique and if the page has scrolled the messages are misplaced. A solution is to set the anchor to display:block as in example 2 below.)

As an aside display:none completely removes all trace of an element whereas visibility:hidden just makes it invisible but still occupying the same space. If the elements were in the normal flow this would of course make a significant difference but as they are absolutely placed then there is no real difference.

IE has one bug to overcome and that is it needs something to change on the anchor state before it will allow the span to be made visible. This is simply accomplished by setting visibility to visible when the anchor is hovered and this has the desired effect without any drawbacks at all.

That's about all you need and is a very simple effect. You can of course reveal images also or you can reveal more than one element for a multiple effect.

Here is another exampleThis is some example textMessage 1Message 2 with multiple effects.

With a little imagination you can use the above to provide some textual information about images or perhaps a small thumbnail gallery where the larger image is displayed when you rollover the thumbnail. You are only limited by your own imagination so experiment and have fun.

Image Gallery

Roll your mouse over the thumb-nail images to reveal the larger image in the center.

I have used images in the background to make the code cleaner and easier to read but the techniques are much the same if you want the images in the foreground for accessibility reasons.

^ Back to Top ^