Or, There’s a lot I still don’t know.

Or, There are no stupid questions, but lots of ignorant designers.

I’ve been working on web photo gallery templates like a madwoman and wanted to have an effect where the photo thumbnails are dim until you hover over them. There were other things about the specific layout I was working on that were new for me, as well — two that come to mind are working with transparent .pngs and trying to get them to work in IE6 and having slightly transparent text in certain areas. (Some other specifics about the project specs — the page had to work in IE6, IE7, FireFox 2, and Safari 1.5.)

Thank goodness for Google. Here are all the new things I’ve learned while working on these templates:

• How to use bgsleight.js for transparent background images
  • How to get bgsleight to work so that you can click links in IE
  • That “stretched” images don’t look very good
• That -khtml-opacity even exists (and is necessary for some versions of Safari to have different opacity levels)
• That IE’s filter: alpha(...) only works on objects that have “layout”

Here are the specific details for my own reference, but maybe someone else may find it helpful…

bgsleight.js adventures

I’ve (infrequently) used this fix for transparent PNGs in IE5.5/6. But with the layouts I was working on, I wanted to be able to have transparent PNG backgrounds as well. That’s where the bgsleight.js code came in handy.

The code as it’s given will stretch the .png file out to fit the given area and will ignore any background-repeat properties that are set in the CSS. I’m fairly weak in Javascript/DOM-type stuff (have some books coming in from Amazon soon) so it took me longer than it probably should have to figure out how to get around it, and only after scrolling through many comments on the site.

So for my future reference:

1. Change the following line of code to use “crop” instead of “scale”:document.all[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+mypng+"', sizingMethod='scale')";
2. Use an extra-big .png background image since you can’t have the image tile.

Another thing about the bgsleight.js script is that it “disables” links in IE in the area that the background .png covers. Again, I found a solution to this in the comments:

Add a { position: relative; }. So far this hasn’t seemed to cause any other problems.

Okay, now I have transparent background images for IE6/7, FireFox, and Safari. Next!

Transparent thumbnail images

I got pretty frustrated yesterday because I had this CSS code and it wasn’t working in IE (worked great in FireFox). Neither the image thumbnail nor the text caption were even slightly transparent.

.thumbnail a:link, .thumbnail a:visited {
-moz-opacity: .5;
opacity: .5;
filter: alpha(opacity=50);
-khtml-opacity:50;
}
.thumbnail a:hover {
-moz-opacity: 1;
opacity: 1;
filter: alpha(opacity=100);
-khtml-opacity:100;
}
.caption {
padding: 5px 0px;
-moz-opacity: .7;
opacity: .7;
filter: alpha(opacity=70);
-khtml-opacity:70;
}

(I should mention briefly that I didn’t even know -khtml-opacity existed before doing this. But I saw it in some existing code and wondered what it was for. Turns out that it’s needed for Safari 1.1. Who knew? Now I do. For this project I technically only needed this to work for Safari 1.5+, but I figured I might as well leave it in.)

Anyway, back to banging my head against IE. I don’t remember what combination of keywords finally pointed me to this article, but it informed me that alpha opacity only works on elements that have “layout” — most typically, elements that have a width/height, but could have any number of hasLayout properties set.

Making use of this new-found knowledge, I modified my CSS code to target the img instead of the a element, then added zoom: 100% to my .caption class. (There’s probably any number of ways to set one of the hasLayout properties; those just happened to be the ones I picked.)

Here’s my new code:

.thumbnail a img {
-moz-opacity: .5;
opacity: .5;
filter: alpha(opacity=50);
-khtml-opacity:50;
}
.thumbnail a:hover img {
-moz-opacity: 1;
opacity: 1;
filter: alpha(opacity=100);
-khtml-opacity:100;
}
.caption {
zoom: 100%;
padding: 5px 0px;
-moz-opacity: .7;
opacity: .7;
filter: alpha(opacity=70);
-khtml-opacity:70;
}

Finally, everything was working as I wanted it to!

(Those of you who are smarter than me… if you see any problems with the above code, PLEASE let me know!)

Update 3/30: Question — is zoom: 100% invalid? I didn’t run into problems at theW3C CSS Validator but this link mentions that zoom is MS-proprietary and will not validate. Will have to look into that more…