You may have seen those neat reflections done by iWeb on all those .Mac pages for example here. Now, thanks to an add-on by Script.aculo.us creator Thomas Fuchs you can add these very same effects to images on your own site. This effect is implemented using the code below. It runs a top the Script.aculo.us framework and is implemented by doing the following.

Include the Prototype and Script.aculo.us libraries

<script src="prototype.js" type="text/javascript\"></script>
<script src=”scriptaculous.js” type=”text/javascript”></script>

Include the new reflection function

var Image = {
reflect: function(element) {
element = $(element);
options = $H({
amount: 1/3,
opacity: 1/3
}).merge(arguments[1] || {});

if(!element.complete) {
setTimeout(function(){Image.reflect(element,options)}, 10);
return;
}

var p = element.parentNode, n = element.nextSibling;
var d = 1.0/(element.height*options.amount);

(element.height*options.amount).times( function(line) {
var h = Builder.node('div',{style:'height:1px;overflow:hidden'},
[Builder.node('img',{src:element.src,
style:'margin-top:-'+(element.height-line-1)+'px'
})]);
p.insertBefore(h,n);
$(h).setOpacity((1-d*line)*options.opacity);
});
}
}

Call the new method feeding your image’s div id as the parameter

Image.reflect('image-id');

You can see the actual project page here but their implementation was a tad DIY for my liking, that’s why I clarified it here.

Happy Reflecting!