Internet Brothers - Dynamic HTML Tips and Tools

Internet Brothers: Helpware for the Cybercommunity - DHTML Tips and Tools

The Alpha Filter

Microsoft's Internet Explorer 4+ browser provides a variety of visual filters that can be used to apply different visual effects to elements on your Web pages. Filters are applied to HTML elements using the filter style attribute, and can have an effect on elements that define a rectangular space within the browser window (i.e. buttons, images, div and span blocks, etc.). The element must either be positioned on the page, or have a defined width.

One of IE4's visual filters is the Alpha filter, which can change the transparency level of an element, making it appear faded. And one common use of the Alpha filter is to fade out a button, giving the impression that the button has been disabled. To create this effect as the result of a user's action, start by creating the element that you want to appear disabled with a statement like:

<INPUT type="button" value="Demo Button" id=dimbutton
style="color:yellow; background:navy filter:Alpha(enabled=0)">

We've given this button the id "dimbutton." Note that the Alpha filter has been included in the inline style sheet for dimbutton, but that the filter's enabled property is set to 0, so it has not yet been applied. Next, create the element that will trap the user action. How about another button:

<INPUT type="button" style="color:yellow; background:navy"
value="Disable other button" onclick = "disableIt()">

Clicking on the Disable other button calls the disableIt function, which goes in the <head> section of your page and looks like this:

function disableIt() {
    dimbutton.filters.item(0).enabled = 1
    dimbutton.filters.item(0).opacity = 35
}

The disableIt function enables dimbutton's Alpha filter (the first item in the IE4 filters collection), and sets the opacity of the filter to 35 (where 100 is fully opaque), making the button appear faded, and therefore disabled. OK, let's see it in action.

Please let us know if this tip was helpful to you, or if you have anything you don't understand, by sending us email or visiting the comments page. To learn more about other Internet Explorer DHTML filters visit the Microsoft Visual Filter Effects Reference.

Was this site useful to you?

To print a copy of an Internet Brothers tip or article, simply take a photograph of your computer screen, develop the film and have the photo enlarged to the font size of your choice.

The Internet Brothers have implemented hierarchical menus for navigation. Easier done than said. In our effort to be friendly to all browsers, the menu tree is functional with version 4 or greater of both the AOL/Netscape and Internet Explorer products.

As stated above, hovering over the button will open the menu for these browsers. But if you have an older product, don't fret, we'll send you to the scum page. Just click the button.

Why haven't you downloaded the newer versions? They're free you know.
Download Internet Explorer
Download Netscape Communicator

The hierarchical menus were created using Peter Belesis' © Dynomat DHTML scripting tool from Webreference. Give them a visit, you'll like what you learn.

another darn bug

Site Map

The reason so many people never get anywhere in life is because when opportunity knocks, they are out in the backyard looking for four-leaf clovers.