Posted By

thesmu on 08/14/09


Tagged

css image style print swap


Versions (?)

Who likes this?

5 people have marked this snippet as a favorite

WinterCrow
janvdm
bok
abbyabigale
robotici


css image swap


 / Published in: CSS
 

URL: http://brassblogs.com/blog/css-image-swap

You will see that it’s pretty basic – setting width and height attributes for the image, and basically just telling the browser “when someone hovers over the image, make it disappear” – and it simply reveals the background image for the div – your “hover” state.

This, of course, will work in all manner of ways. If you have a navigational list, simply replace the with

  • . You will also have to separate them – if you’re using 12 different images (6 images for the “on” state, and 6 for “off” – 2 images for each link), you’ll have to set 6 different classes for each image, since none will have the same images representing them.

    So yes, it does increase your CSS filesize. But, if you’re looking for a certain type of display, and you (or your client) desires a particular font, size and color for certain elements on the site, this is an excellent alternative to using a javascript image replacement. An added bonus – users who have javascript turned off in their browsers will still see the rollover effect.

    Now, keep in mind, you have to deal with IE. (yeah, I bet you weren’t expecting that!) Well, the thing with IE is, it has problems caching background images. So if you move your mouse over the above stuff in IE, it’ll change as expected – but if you move ever so slightly, you’re going to see the blue flash back over. So as you slowly move your mouse across the image, it’ll flicker “redblueredblueredblue” – which is as annoying as hell.

    This is actually easy to fix. In your header (or if you’re using a conditional comment to pull in an external stylesheet for IE, simply add this line to the bottom of the IE-specific stylesheet):

    You must be sure that, for IE, that the “background-position” attribute is NOT set. If you set a background-position for the div, then the flicker will reappear.

    Otherwise, you’re set! Enjoy your javascript-free rollovers. :)

    Tested on Windows XP: FF 1.0.7, FF2, FF3, IE 8, IE 7, IE 6.0, IE 5.5, IE 5.0, Opera 8 and Netscape 7. Tested on Mac OSX Tiger: Safari 2.0, Mozilla Firefox 1.0.6, and IE 5.2. (that last one has a slight padding glitch, which is a result of my global stylesheet – easily fixed, if I really felt like dealing with it…but the point is, the rollover effect does work perfectly there.) Tested on Mac OSX Leopard: FF3, Safari 3.2.1, Camino 1.6.6, Opera 9.63.

    1. <div class="nav">
    2. <a href="#">
    3. <img src="logo.gif" width="187" height="136" alt="" />
    4. </a>
    5. </div>
    6.  
    7. And the CSS to go along with it:
    8.  
    9. div.nav {
    10. height: 187px;
    11. width: 136px;
    12. margin:0;
    13. padding:0;
    14. background-image:url("logo-red.gif");
    15. }
    16.  
    17. div.nav a, div.nav a:link, div.nav a:visited {
    18. display:block;
    19. }
    20.  
    21. div.nav img {
    22. width:100%;
    23. height:100%;
    24. border:0;
    25. }
    26.  
    27. div.nav a:hover img {
    28. visibility:hidden;
    29. }

    Report this snippet  

    You need to login to post a comment.