reflection.js allows you to add reflections to images on your webpages. It uses unobtrusive javascript to keep your code clean. Your visitors will need a browser which supports the canvas tag. Browsers which support canvas include Firefox 1.5, Opera 9 and Apple Safari. If they are using another browser, the script degrades and they won't notice a thing.
Upload reflection.js and prototype.js and include them into your webpage.
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="reflection.js"></script>
To add a reflection just add a class="reflect" to the image. View source to see example.
The reflection will automatically fade into the background colour.
If you run a forum, you can modify your templates and add class="reflect" to the avatar HTML code to add reflections.
The reflection by default will be half the height of the original image. Thus, the height of the image plus reflection will be 1.5 times the original height of the image. You can try the experimental wholeimage class (does not always work) by adding class="reflect wholeimage" to your images. This will create a reflection the same size as the original image.
If you've made any changes or bug fixes to reflection.js, feel free to publish and distribute them. If you contact me through my blog I can also include the changes in the main reflection.js download.
Version 0.4
Version 0.3
Version 0.2
Version 0.1
Original idea and inspiration for the script came from Romain Guy's Crystal CD Case. Sitharus made it all work in Safari. Andreas Linde helped make the script work better with CSS styles. Kudos!
Also thanks to neonDragon and the Evolution Community for feedback and assistance.