<style>
body {
background-color:black;
color: white;
}

img.reflect {
code: expression((function(img){
if (!img.reflected) {
img.reflected=true;
var rImg = document.createElement(‘img’);
rImg.style.cssText = “position: absolute; clip: rect(auto auto 30% auto); filter: flipv alpha(opacity=50, style=1, finishOpacity=0, startx=0, starty=0, finishx=0, finishy=30)”;
var bcr = img.getBoundingClientRect();
rImg.style.top = bcr.bottom – document.body.clientTop;
rImg.style.left = bcr.left – document.body.clientLeft;
rImg.src = img.src;
rImg.width = img.width;
rImg.height = img.height;
rImg.reflected = true;
document.body.appendChild(rImg);
}
})(this));
}
</style>

<img src=”http://mir.aculo.us/stuff/reflector/wollzelle.jpg” class=”reflect”>

Works only in the best browser since 2000, but it saves you over 100KB of JS and about 100 images.

Thanks to Sjoerd.

If you dig these effects with multiple instances of images and such you should check out some flash (fla) sources that emulate a mode 7 (aka Mario Kart, DOOM) mode. That would be tight to see in js.

http://www.gotoandplay.it/_articles/2003/07/mario_kart.php
http://www.gotoandplay.it/_articles/2004/11/mode7proto.php

geez yall are harsh…but i see your points.

…which falls back to a fresh object if for some reason the native object is not there.

Chris: If you want to create mirrored HTML its time to shut the internet down and go home. As for using other peoples images, don’t.

As to Dan’s comment: The difference is that I can do this effect with images I didn’t create or I could even do it with non-image content.

No one forces you to use it (plus, my original article explicitly states that it’s not meant for production use).

@Bjorn: Can you please tell what you mean by “Scriptaculous has fallen out of favor with me since the new version is broken in gecko browsers”? It’s working fine for me….?

I know, when you’re making the image web-friendly, use Photoshop to add a reflection.

Removing my own shin bones would be cool, but difficult and painful to do – see any connection to this script?