Now if you want to add a reflection to an image this is the tutorial for you. First you will have to download the javascript file by clicking the following link Reflection Script.
Now after downloading the script you will have to upload the file to your web server and then link the JavaScript file into the web page that will be using the reflection script. You will have to place the link between the <head> tags right after the <title> tags, as I will show you in the following example below.
<html>
<head>
<title>Welcome To HTML & XHTML</title>
<script type="text/javascript" src="http://www.yourdomain.com/scripts/reflection.js"></script>
</head>
<body>
</body>
</html>
Now in order for the reflection to work you will need to insert the class attribute with the value of reflect in the desired image tag.
The way the script works is when the page is loaded in the visitors browser the JavaScript will go through the web page to check and see which image tag has the class attribute with the value of reflect.
If the script finds an image tag with the class attribute value of reflect the script will copy the image and then flip it and then apply the default values of 50% for both the opacity and height to the image or images that are reflected as in the example below.
<html>
<head>
<title>Welcome To HTML & XHTML</title>
</head>
<body>
<p>
<img src="./images/sky.jpg" alt="A JPG Image of a Sky" class="reflect" />
</p>
</body>
</html>
Here is the how the above code is displayed.
Now the reflection script also allows you to add two kinds of customizations which include the height of the reflection as well as the opacity of the reflection. Now opacity basically means how much light is shown threw the image which creates the see thru effect.
In order for you to adjust the height of the reflection you will have to add a new value called rheight%% to the class attribute along with the reflect value. The two percentage signs (%%) should be replaced by an integer also known as a number between 0-100. The (%%) will be the percentage of the images height that would and should be duplicated in the reflection. Now when the percentage value increases the size of the reflection increases.
Now let me show you how to code the rheight%% value.
<html>
<head>
<title>Welcome To HTML & XHTML</title>
</head>
<body>
<p>
<img src="./images/sky.jpg" alt="A JPG Image of a Sky" class="reflect rheight90" />
</p>
</body>
</html>
Here is how the above code is displayed.
To adjust the opacity of the image or images reflection, you will have to include the other value called ropacity%% to the images class attribute along with the reflect valve. Just like the rheight%% value, the two (%%) percentage signs in the ropacity%% value should be replaced by an integer between 0-100. The two (%%) percentage signs is the percentage of the transparency of the reflected image. Now as the opacity value is decreased the less visible the reflection will become.
Now both the rheight%% and ropacity%% values can both be used at the same time. As I will show you in the example below.
<html>
<head>
<title>Welcome To HTML & XHTML</title>
</head>
<body>
<p>
<img src="./images/sky.jpg" alt="A JPG Image of a Sky" class="reflect rheight90 ropacity100" />
</p>
</body>
</html>
The reflection effect should also fade into any background color.
Know there is some important things you should know is that Internet Explorer for Windows 5.5+, Firefox 1.5+, Oprea 9+ and Safari support the reflection script. Animated images will reflect only in Internet Explorer for Windows. And scaled images may also appear distorted in Internet Explorer for Windows what I mean by scaled images is when you include the height and width attributes to the <img> tag to adjust the size of the image. Also JavaScript that is placed in the body tag like the onload="action" will cause the reflection to fail.
discuss this topic to forum
