Opacity Script

This script allows you to add a neat fade-in/out effect to images, text, whatever.

Instructions:
  1. Cut-n-paste the code below into the <HEAD> section of your <HTML> page:

    <script language="javascript" src="opacity.js"></script>

  2. Create your HTML content.
  3. "Wrap" the content in a DIV element.
  4. Assign the DIV element a unique ID value.
  5. Inside some javascript tags, after the element, use the addFadeObject() constructor for the element.
  6. Figure out the settings you want to use and put them in the constructor above.
The format for the addFadeObject() is as follows:

addFadeObject( elementIDstring , start_opacity , end_opacity , opacity_incr , time_per_incr )

Note: The total time it will take from start_opacity to end_opacity can be determined by the formula below. This value may not be exact due to browser speed, but it should be close.

total time (in milliseconds) = ( start_opacity - end_opacity ) / opacity_incr * time_per_incr

The effects this script creates can only be seen in IE4+ and Netscape 6+. Older browsers such an Netscape4 should just show the element. If the elements are incorrectly rendered in NS4, try using workaround methods such as wrapping elements in ILAYER tags or something. The script still won't work, but the content should look better.


Scroll down a bit to see various examples. These are not the only ways you can use this script, but it's a start.


Examples

Roll the mouse over the examples below to demonstrate the fade in/out effects. You will see the fading effect in NS6+ and IE4+ browsers, Netscape 4.x browsers will simply show the images without any effects. I suppose the script could be modified to completely hide/show content on mouseover, but those tweaks can be done by the end user if so desired.

I've also included the HTML used for each example so you can see the various ways the script can be used.

Examples one, two, and four look OK when viewed with NS4, the third doesn't properly display the CSS attributes of the "fake" buttons. The fourth one requires some "playing" around or the buttons squish together.

Example 1
Fade-in effect using images


HTML used for this example:
Example 2
Fade-out effect using images


HTML used for this example:
Example 3
Fade-in effect using text and CSS "buttons"

Text 1
Text 2
Text 3
Text 4
Text 5
Text 6
Text 7
Text 8

HTML used for this example:
Example 4
Fade-out effect using images with underlying text

Text 1
Text 2
Text 3
Text 4

At first, these buttons were squished together in Netscape 4. I found the font style decaration for the text was at fault so wrapped all of the buttons in a DIV and set the font-size to 18px. Since the text under the buttons have their own style attributes, this workaround didn't affect them under IE4 / Netscape 6. Even though the script doesn't work in Netscape 4, I still try to make the page look about the same. I also had to wrap the individual images and text DIVs in seperate LAYER tags or the z-index got messed up.

HTML used for this example: