4.33. Inserting Reflections on Images Automatically

4.33.1. Problem

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

4.33.2. Solution

Download the JavaScript that powers the effect from 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="scripts/reflection.js">
</script>

Insert into the web page the image to which you want to apply the reflection, as shown in Figure 4-54:

<img src="christinaleaf.png" alt="christina m. huggins" />

Figure 4-54. A reflection of the header graphic

To activate the reflection as shown in Figure 4-54, insert a class attribute with a value of reflect:

<img src="christinaleaf.png" alt="christina m. huggins" class="reflect" />

4.33.3. 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 value of 50% for both the opacity and the height to this new reflected image.

4.33.3.1. Customization features

The reflection script allows you to customize the height 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 that should be duplicated in the reflection:

<img src="christinaleaf.png" alt="christina m. huggins"
class="reflect rheight99" />

As the percentage value increases, 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, add a new value, ropacityXX, to the image’s class attribute where XX is the percentage of the transparency of the reflected image:

<img src="christinaleaf.png" alt="christina m. huggins"
class="reflect ropacity33" />

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

You can use both the height and the opacity features at the same time to create subtler effects:

 <img src="christinaleaf.png" alt="christina m. huggins"
class="reflect rheight99 ropacity33" />

4.33.3.2. Known browser issues

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

4.33.4. See Also

The blog post announcing the reflection effect at http://cow.neondragon.net/stuff/reflection/