Transparency

Transparency works for NN6+, Firefox 0.9+, and Internet Explorer 5+. It's awesome. First off, you will need to use CSS with whatever you need to make transparent. Here's the attributes you need to set. 80% opaque (mostly there) is defined nearly the same way for the different attributes.

filter:alpha(opacity=80);
-moz-opacity: .80;
opacity: .80;

You can set an object's opacity with JavaScript as well. However, if you want to use JavaScript to change the opacity in Internet Explorer, you still need to use CSS to set the alpha filter, otherwise it just won't work. How stupid. Also, there is a flicker in some browsers when an object changes from 99% opacity to 100% opacity. Just don't use anything over 99%. Yet another dorky workaround.

To use this function, just set the 'id' attribute in an HTML tag (image, form, table, div, etc.) and and pass the 'id' name along with the opacity (50 = ½ opaque, 99 = nearly completely opaue).

function SetObjectOpacity(obj_name, percent)
{
   var the_obj;
  
   // Compensate for odd parameters and flicker bug
   if (percent > 99)
   {
      percent = 99;
   }
   
   if (percent < 0)
   {
      percent = 0;
   }
   
   if (document.all)
   {
      // Internet Explorer
      menuobj = document.all[obj_name];
      menuobj.filters.alpha.opacity = percent;
   }
   else if (document.getElementById)
   {
      // The rest
      menuobj = document.getElementById(obj_name);
      menuobj.style.MozOpacity = percent / 100;
      menuobj.style.opacity = percent / 100;
   }
}

Examples

Here is a textarea and a pulldown list. To get the pulldown list to work, you need to specify the style for each option. I set the style attribute in the option, but you could do this more appropriately with a class or style sheet instead.

Moving your mouse over this image will make it fade away (almost completely) and moving your mouse away will let it come back again.

Examples

Links