Tech

jeffd

I found this technique recently here:

www.pixy.cz/blogg/clanky/cssnopreloadrollovers/

It's a way to make image swapping behavior using background images and just CSS, very cool. This technique doesn't work on Opera 6, I haven't tested it on Mac browsers, but it seems to work fine on Windows Mozilla 0.9-1.6, Opera 7, IE 5.5.

Like most advanced CSS stuff, this isn't ready for prime time, if you try running this on an older computer, it looks totally horrible, I tried this and the display totally broke. This is for now only an experimentally interesting method, don't use this in the real world, it doesn't work as posted, but it is a cool idea that might be modified for other purposes.

Al you need to do is change the background position of the rollover graphic:

:: Code ::

background: url("button.gif") top left no-repeat;
...
}

...
background-position: 0 -39px;
...
}

...
background-position: 0 -78px;
...
}

this site
www.pixy.cz/blogg/clanky/cssnopreloadrollovers/update.html

posted a fix for Windows IE flicker, but notice how much functionality they sacrificed in doing this, no more a:active state support, plus the so called fix didn't actually really fix it completely, it still lags majorly, again, a technique not ready for prime time, but interesting, requiring tweaks after tweaks to try to get to work... just use javascript and you'll have no problems:

:: Code ::

height: 25px;
margin: 3em 0; padding:0 1em;
border-bottom: 1px solid black;
}

div.outer {
float: left;
width: 120px; height: 25px;
margin: 0 3px 0 0;
background: url( 'bars.gif' ) 0 -50px no-repeat;
}

div.outer a {
display: block;
margin: 0; padding:0;
width:100%; height:100%;
overflow:hidden;
font: bold 13px/1 Georgia, serif;
color:#039;
text-decoration: none;
background: url( 'bars.gif' ) top left no-repeat;
}
div.outer span {
display: block;
margin:0; padding: 7px 0 0 13px;
}
div.outer a:hover {
background-image: none;
color: yellow;
}
div.outer a:active {
color: black;
}

here's the page code:

:: Code ::

<div id="menu">

<div class="outer"><a href="#"><span>First</span></a></div>
<div class="outer"><a href="#"><span>Second</span></a></div>
<div class="outer"><a href="#"><span>Third</span></a></div>
</div>

Back to top

Tech

Tech

patterns.com

tech forums