Recipe 3.23. Inserting Reflections on Images Automatically

Problem

You want to place a reflection of a header graphic automatically.

Solution

Download the JavaScript that powers the effect at http://cow.neondragon.net/stuff/reflection/.

After uploading it to the web server, link the JavaScript file into the web page between the head element:

<script type="text/javascript" src="/books/3/27/1/html/2/scripts/reflection.js"> </script>

Insert the image you want to apply the reflection to into the web page (see Figure 3-58):

<img src="/books/3/27/1/html/2/christinaleaf.png" alt="christina m. huggins" />

Figure 3-58. The header graphic is displayed

To activate the reflection (see Figure 3-59), insert a class attribute with the value of reflect:

<img src="/books/3/27/1/html/2/christinaleaf.png" alt="christina m. huggins"  />

Figure 3-59. A reflection of the header graphic appears

Discussion

As a page is rendered in the site visitor's browser, the JavaScript reflection goes through the image elements of your web page looking for class attributes with the reflect value. Then the script uses the source of the image you want to reflect and creates a new image.

If the script finds any image elements that meet those criteria, the script copies the image, flips it and then applies the default values of 50% for both the opacity and height to this new reflected image.

Customization features

The reflection script allows two kinds of customizations: the height of the reflection and the opacity of the reflection.

To adjust the height of the reflection, add a new value, rheightXX, to the image's class attribute where XX is the percentage of the image's height should be duplicated in the reflection (see Figure 3-60):

<img src="/books/3/27/1/html/2/christinaleaf.png" alt="christina m. huggins"   />

Figure 3-60. The reflection almost equals the height of the source image

As the percentage value increase the size of the reflection increases. For example, the value of rheight99 means that 99% of the original image's height will be used in the reflection.

To adjust the opacity of the reflection, include a new value, ropacityXX, to the image's class attribute where XX is the percentage of the transparency of the reflected image (see Figure 3-61):

<img src="/books/3/27/1/html/2/christinaleaf.png" alt="christina m. huggins"   />

Figure 3-61. The reflection becomes more obscure

As the opacity value decreases the less visible the reflection becomes. For example, the value of ropacity33 means that 33% of the original image's opacity will be used in the reflection.

Both the height and opacity features can be used at the same time to create more subtle effects like the ones in Figure 3-62:

 <img src="/books/3/27/1/html/2/christinaleaf.png" alt="christina m. huggins"   />

Figure 3-62. Both custom values for opacity and height are set

Known browser issues

Internet Explorer for Windows 5.5+, Firefox 1.5+, Opera 9+, and Safari support the reflection script. Animated images do not work with the reflection script except for Internet Explorer for Windows. Also, scaled images appear distorted in Internet Explorer for Windows.