Clagnut

Menu

Fastest rollovers

§ Web standards · Stuff

Pixy demonstrates a method for superfast CSS rollovers which don’t require preloading. It’s so simple it hurts. Create one image which contains your rollover states side-by-side. Then set that image as a background and shift it sideways according to state:

#menu a {
  width:100px; height:30px;
  background: url("button.gif") top left no-repeat;
}
#menu a:hover {
  width:100px; height:30px;
  background-position: 0 -39px;
}
#menu a:active {
  width:100px; height:30px;
  background-position: 0 -78px;
}

Pixy says that state switching is as fast as possible (moving background position is much faster than replacing background image). AFAIK, it works in every CSS2 capable browser (IE5+, Mozilla, Opera, Safari etc) . Try his fast rollover example.

On an unrelated note, Cambridge University scientists dmestnaosrte the phaomnneil pweor of the hmuan mnid. As lnog as wodrs srtat and end wtih the rhgit lttrees, the rset can be in any oedrr, as we raad wrdos as a wlohe, not as ivndiuaidl ltertes. [via Antenna]