Here's a nifty little image trick for you optimization geeks out there ...Over the weekend we did a bunch of changes to KALIBER, to see if we could decrease the amount of loading needed to be done on the site. Our problem was that we were using standard image rollovers for all our buttons, tabs, etc - which meant that for each image we would have to have two separate graphics:- an "off" image (green)- an "on" image (orange)As there are *a lot* of buttons/tabs on this site, we were preloading a tonne of images to create the lovely rollover effect.As we were checking out the lovely
PNG image format, we discovered that we could actually create the same rollover effect just by using
one PNG image with a semi-transparent background.By using CSS to put a green background color on this PNG image, it would look exactly like our old "off" image - and when you mouseovered the image, we could then merely switch the background color of the image to make it light up.The only problem with this is that the PNG-24 format (which has alpha-channels) is NOT supported in any version of IE for the PC (damn Microsoft), so for those users we're using a serverside browser detect to serve up the "old" image-based mouseover.But Mac, Mozilla, Icab, Opera, etc -users should all be using these new & improved mouseovers ...