Typophile

Transparent gif in rollover image

Sharon Van Lieu

Basic question I just can’t figure out — the image below is part of a web page. I want the home, about and contact buttons to be rollover images that have a transparent background. Of course, a transparent gif has that ugly white line. This page will have a flash gallery on it. Is the only solution is to make the whole page a flash page?

Thanks,

Sharon

NEVERMIND!!

Answered my own question...png. My brain is tired.

Sharon

PNGs won’t work in dreaded Internet Explorer (but then what does).

Oh, rats! Thanks, Ken. I hate having to work around IE. I guess Flash it is then.

You saved me some time, thanks again.

Sharon

>This page will have a flash gallery on it. Is the only solution is to make the whole page a flash page?

No.

For IE you could search for a javascript library called “IE 7”. Nice thing about it, with it you can code properly CSS 2.0 (CSS 2.1?) for all standard compliant browsers and via conditional comments you can solve nearly all problems for IE with it (transparency, box-model bugs, attribute selectors …)

There is a quite simple javascript to solve this transparency problem for IE, too. Search the web for “IE transparency image”.

I use transparent png-24 format instead of gif.

There is a javascript solution that’ll fix the transparent PNG in IE issue. Try searching for something like “pngfix.js”.

A gif does not have to have “that ugly white line” around it. If you set the matte to black when saving the gif, then the antialiasing will blend to black, and not to white. you will still have a blackish border around it where the background is lighter than black but this will be better. You might even find a darker gray that works.

But why limit yourself to GIF. Slice up a JPG and make the rollover from that. If you position things correctly the background of the jpg will line up with the image behind, and transparency is not needed.

Thank you, Don. :-)

Sharon

PNGs work in IE if you use one of the many ’IE PNG fixes’. Google “Twin Helix IE PNG fix” for a decent one. IE7 (as mentioned) works as well.

I wouldn’t use JPGs for this. JPGs will never match the background color perfectly and tend to add artifacting to areas of high contrast (namly type). A gif will work fine.

Thanks, Darrel. I’m googling now. :-)

Sharon

Captured from web.archive.org on 23 Oct 2009. view this capture