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]
Lisa wrote:
I’ve been trying to figure out where that scrambled word research actually comes from. Who said it was Cambridge Uni? Antenna doesn’t seem to have a post about it at all.
Simon Jessey wrote:
I like Pixy’s method for those rollovers, but as with all CSS image rollovers it seems, they still work poorly in IE.
That is why I try and restrict my link behaviors to styled text wherever possible.
Taylor wrote:
Simon is talking about older versions of IE i assume? The rollovers work perfect for me on win ie6 (and are even implemented on my own site).
Simon Jessey wrote:
Dave Shea explains what I was on about, and offers the solution:
http://www.mezzoblue.com/cgi-bin/mt/mezzo/archives/000274.asp
Julian wrote:
Can anyone tell me why opera7 and IE6 (win2k) go to different pages when the pixy rollover example links are clicked?
Rich wrote:
Julian – something to do with the hrefs in Pixy’s examples being empty. Opera (and Mozilla) interpret an empty href as meaning the current page; IE interprets it to mean the current directory. Both ways make sense in their own right.
And as empty hrefs are invalid HTML, browsers are well within their rights to behave as they wish.
Julian wrote:
Rich wrote:
“And as empty hrefs are invalid HTML, browsers are well within their rights to behave as they wish.”
A point well made :D