austizmo

've seen tons of nifty flash rollovers that use partial transparency to highlight a link or button while still showing the background. Since I can't fit my head around flash, I decided to see if I couldn't do the same thing with CSS. I've come up with an excellent, compliant solution that works in IE, Mozilla, and Opera. How often does that happen? The secret lies in the image. At first I tried using a PNG-24 image with 50% transparency. IE didn't like that, but I ran into an interesting glitch some browsers have with .pngs. Instead of making them transparent, they dither them.

So this is what I did. I went into photoshop and set myself up and new image 2x2 px. I zoomed in to 1600% and snatched my pencil tool. Set the size to 1 px and drew myself a black diagnol line.

--Example-- X is a black pixel and O is a white.
XO
OX
-----------

I saved this as a pattern and fired up another new image. Jumped into the channels pallete and made an alpha channel. Filled it with my new pattern and selected it. Then I just added it as a mask to the white background and viola! A 50% transparent image. Then I saved the badboy as a .gif and set up my css like this:

a:link {
color: black;
text-decoration: none;
}

a:visited {
color: black;
text-decoration: none;
}

a:hover {
background: url("trans.gif") top left no-repeat;
color: black;
text-decoration: none;
}

a:active {
background: url(trans.gif) top left no-repeat;
color: black;
text-decoration: none;
}


This is what came out:

http://infevo.no-ip.info/exp/rollover.html

Hercules

Thanks austizmo! Very nice.