Colin Cochrane

Colin Cochrane is a Software Developer based in Victoria, BC specializing in C#, PowerShell, Web Development and DevOps.

Three CSS Roll Over Techniques You Might Not Know About

When it comes to rollover effects in web design the most common way to accomplish the effect has traditionally been with JavaScript:


JavaScript in the HEAD section

[code:html]

<script language="JavaScript">
<!--
// preload images
if (document.images) {
img_on =new Image(); img_on.src ="../images/1.gif";
img_off=new Image(); img_off.src="../images/2.gif";
}
function handleOver() {
if (document.images) document.imgName.src=img_on.src;
}
function handleOut() {
if (document.images) document.imgName.src=img_off.src;
}
//-->
</script>

[/code]


And in the element with the rollover effect

[code:html]


<a href="http://www.domain.com" onMouseOver="handleOver();return true;" onMouseOut="handleOut();return true;"><img name="imgName" alt="Rollover!" src="/images/1.gif"/></a>

[/code]

The reason this method is used so commonly is because it is simple to implement and, more importantly, avoids the "lag" on the first mouseover that comes when using a CSS background-image switch on an selector:hover rule due to the delay required to download the rollover image. One thing that a lot of people don't realize is that there are methods to accomplish this effect in CSS without the initial rollover lag.

Method One - CSS Preloading

This is the quick and dirty way to force browsers to download rollover images when they initially load the page. Let's say you have the following document:

[code:html]


<html>
<head>
<title>My Rollover Page</title>
<style type="text/css">
#rollover{background:url(/images/1.gif);}
#rollover:hover{background:url(/images/2.gif);}
</style>
</head>
<body>
<div>
<a id="rollover" href="http://www.domain.com">My Rollover Link</a>
</div>
</body>
</html>

[/code]

In this page there would be a noticible delay when a user first mouses over the "rollover" anchor. The CSS Preloading method uses an invisible dummy element set to visibility:hidden, and has the "active" version of the rollover image set as its background.

[code:html]

<html>
<head>
<title>My Rollover Page</title>
<style type="text/css">
#preload{position:absolute;visibility:hidden;}
#image2{background:url(/images/2.gif);}
#rollover{background:url(/images/1.gif);}
#rollover:hover{background:url(/images/2.gif);}
</style>
</head>
<body>
<div id="preload">
<div id="image2"></div>
</div>
<div>
<a id="rollover" href="http://www.domain.com">My Rollover Link</a>
</div>
</body> 
</html>
 

[/code]

Method Two - Image Visibility Swap

This method accomplishes the same goal of forcing the browser to load both of the rollover images, but attacks it in a different way. Using the same example as above, we basically set the background of the containing anchor element to the "active" state of the rollover, and set the contained image to be the "inactive" state. Then it's just a matter of hiding the image element on hover.

[code:html]

<html>
<head>
<title>My Rollover Page</title>
<style type="text/css">
#rollover{background:url(/images/2.gif");display:block;height:50px;width:50px;}
#rollover:hover img{visibility:hidden;}
</style>
</head>
<body>
<div>
<a id="rollover" href="http://www.domain.com"><img src="/images/1.gif" alt="My Rollover's Inactive Image" /></a>
</div>
</body> 
</html>  

[/code]

This is the method that this site uses for the ColinCochrane.com logo in the header.

Method Three - Multistate Image

This method avoids the preloading problem altogether by using only one image that contains the inactive and active states. This is accomplished by creating an image that has the inactive and active versions stacked on top of eachother, like so:



Then all you do is set the element's height to half of that of the image and use the background-position property to shift the states on hover:

[code:html]

<html>
<head>
<title>My Rollover Page</title>
<style type="text/css">
#rollover{background:url(/images/multi.gif") bottom;display:block;height:20px;width:100px;}
#rollover:hover{background-position:top;}
</style>
</head>
<body>
<div>
<a id="rollover" href="http://www.domain.com"></a>
</div>
</body> 
</html>

[/code]


Now you have some different techniques to consider when implementing rollover effects on your website.

Comments (7) -

  • Daniel

    11/6/2007 12:51:24 AM | Reply

    Because of its simplicity and web experience,  method #3 (Multistate Image) must and has to be the most used.
    I don't even imagine doing it another way.
    Thanks for the other methods tough.

  • Colin Cochrane

    11/7/2007 3:00:17 PM | Reply

    Number three is certainly the preferable option.  That being said, the first and second methods can be valuable in situations where you are limited in the modifications you can make to the source code, or when you are unable to modify the source image.

  • Mike Duncan

    11/13/2007 12:26:16 AM | Reply

    Great story, kicked the heck out of it!

    Only gotcha for people to consider is that methods 2 and 3 can only 100% safely be applied to links, as the hover pseudo is not universally applied things beyond A (anchors).

    --Mike

  • Chris Pietschmann

    11/13/2007 1:00:42 AM | Reply

    I know about the last one, but never really thought about the others. Thanks!

    "Only gotcha for people to consider is that methods 2 and 3 can only 100% safely be applied to links, as the hover pseudo is not universally applied things beyond A (anchors)." - Mike Duncan

    But, you can still wrap an anchor tag around pretty much anything, and as long as you set href="#" it wont link anywhere.

  • Pierre Zevallos

    5/24/2008 6:34:15 AM | Reply

    Your 3 techniques to solve the problem cause by IE7 unable to interpret the CSS background images to simulate rollovers are good solutions.

    Traditional, (as you pointed out), was to use rollovers that use JavaScript which Internet Explorer specifically will give the visitor/viewer unnecessary warnings (and the non-pc person might think of it as a malicious software or their kind).

    To pull away from JavaScript code and to be able to have a compatible and standard format CSS was the solution for designers and developers alike to have clean code that was cross-browser-platforms.

    Old problems new problems done again by Internet Explorer browser and not interpreting your CSS code for background-images.

    I will admit that I understand your solutions, the why and the how; however I was unable to duplicate them efficiently . . .  I do know they should work properly; maybe because I was trying to apply it to my css/html code which has a menu list that has 8 images (times 3 for rollover multistates).

    Your method one and two requires extra code a small price to paid and keeping in mind the hidden visibility and inactive states for the correct elements (images).

    Your method three is cleaner but it requires having the software and knowing how to create the image (and the important requirement of using the same font type).

    Note: from w3c.org
    http://www.w3.org/TR/WCAG20-TECHS/F3.html
    F3: Failure of Success Criterion 1.1.1 due to using CSS to include images that convey important information


    The CSS background-image property provides a way to include images in the document with CSS without any reference in the HTML code. The CSS background-image property was designed for decorative purposes and it is not possible to associate text alternatives with images that are included via CSS. Text alternatives are necessary for people who cannot see images that convey important information. Therefore, it is a failure to use this property to add images to convey important information.

    Note: Embedding information into a background image can also cause problems for people who use alternate backgrounds in order to increase legibility and for users of high contrast mode in some operating systems. These users, would lose the information
    in the background image due to lack of any alternative text.


    While trying to duplicate/simulate your samples I realize that using "the image" with in the html tag as shown on part of your sample method two:
    <a id="rollover" href="http://www.domain.com"><img src="/images/1.gif" alt="My Rollover's Inactive Image" /></a>


    I realize that it would work with any "size-image" and so it should work for any image format as well (allow by the html tags). Hence using an image of exactly the same dimensions as the original but instead of been a gif or jpg create (make it and save it) as a fully transparent PNG24.

    <a id="rollover" href="http://www.domain.com"><img src="/your_image_exact_dimensions_fully_transparent.png" alt="My Rollover's Inactive Image" /></a>

    This implies that not change to the CSS code is needed, neither renaming nor creating new ID.

    All you have to do is to insert within the DIV tags inside the html the: <img  
    src="/your_image_exact_dimensions_fully_transparent.png" />

    Since now you have an image within the html code, you could add the important information of what the image is about with in the "alt" and comply with the w3c.org.

    One more thing you must make sure that the border of the image is specify to be equal to zero.

    <div id="khausakmenuDIVs06"><a href="khausakmusic.com/...cography.html"><img
    src="images_menu_list/menu162x31/menu_list_transprt162x31_12.png" alt="khausak discography page link" border="0" /></a>  
    </div>

    This will work and solve the nightmare caused by IE7 and will continue working with Firefox (and more likely with any browser that albeit to CSS - cross browser-platforms compliant).

    Recap Tags: exact image dimensions, must be PNG fully transparent, do not forget w3c alt requirements.

    Thank you Colin Cochrane for the information on the other solutions.


    Sincerely,


    Pierre Zevallos
    http://NetworkingFriends.com
    (if you visit my site; it needs to be re-work since I have not have the time to make take advantage of the CSS; the solution to the IE7 problem was to be implemented on a website that I am currently working on http://khausak.com not running on the new code nor design . . . had to tackle this IE7 nightmare first!).

    P.S. Please let me know if this works for you as well

  • e devlet

    6/16/2008 3:26:01 PM | Reply

    css background examples , Properties , Attribute   - - css-lessons.ucoz.com/background-css-examples.htm

Pingbacks and trackbacks (2)+

Loading