Reflection

It works in all the major browsers - Internet Explorer 5.5+, Mozilla Firefox 1.5+, Opera 9+ and Safari. On older browsers, it'll degrade and your visitors won't notice a thing. Best of all, it's under 5KB.

Download code Visit demo

Tags: reflection

<< TjpZoom Magnifier Loupe >>

Reflection demo

Changes to the code below will update the demo above in real time.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<base href="http://www.ajaxdaddy.com/media/demos/play/1/reflection/reflection/" />

<p style="clear: left">This file demonstrates some of the things reflection.js does.</p>

<h2>Coloured Backgrounds</h2>

<p>The reflections should fade into the background colour.</p>

<h2>Varying Heights</h2>

<p>Using the class attribute, the height of the reflection can be varied. The first image uses the class "rheight20" which shows a reflection 20% the height of the image. The next one uses rheight40, then rheight60, and so on.</p>

<h2>Varying Opacities</h2>

<p>This time each reflection has a varying opacity starting from 20% going up to 80%.</p>

<h2>Floated Image with Border</h2>

<p>The image and the reflection should be aligned to the right of the page. The border should display around both the image and reflection.</p>

<h2>Scripted Reflection</h2>

<p>These reflections do not have the class="reflect" attribute. They uses the Reflection.add() function.</p>

<p>The reflection should become brighter when the mouse is placed over the image.<br /><img src="example.jpg" alt="" onmouseover="Reflection.add(this, { opacity: 2/3 });" onmouseout="Reflection.add(this, { opacity: 1/3 });" class="reflect ropacity33" /></p>

<p>Click the image to add a reflection.<br /><img src="example.jpg" id="sorbohax" alt="" onclick="Reflection.add(this, { height: 1/3, opacity: 2/3 });" /></p>

<p><a href="javascript:Reflection.remove(document.getElementById('sorbohax'))">Remove Reflection</a></p>

<p>Using Reflection.add(), you can vary the amount of reflection.</p>

</script>

<p><a href="javascript:varyReflect();">Vary the reflection opacity</a> (<strong id="indeeda">10</strong>% opacity)</p>

<h2>Scaled Images</h2>

<p>This may look strange in Internet Explorer.</p>

<h2>Clickable Images</h2>

<p>If everything looks as it should, Reflection.js is working correctly!</p>

</body>
</html>

Aug. 3, 2007, 3:06 p.m. - ZiKRo: Nice work. I realy like it. Thanks for sharing.
Aug. 23, 2007, 10:19 p.m. - marknt15: I like it! =) Thanks a lot for sharing this ajaxdaddy I will add this functionality to my personal website =D
Aug. 26, 2007, 12:17 a.m. - luigi: Thank!! great Site this ajaxdaddy!!
Sept. 11, 2007, 10:27 p.m. - Loco: Great reflection..but how come the reflection shows a boxy type on ie7.. no prob with ff..its a png image
Sept. 28, 2007, 7:55 a.m. - Liu: where did we actually find the code for the refection part?
Feb. 8, 2008, 6:27 a.m. - chris: Does not work on IE 5.2 Mac OS.
June 19, 2008, 7:54 p.m. - Tsiou: You can find The download link in the top of the page under the arrows Great Job
Jan. 26, 2009, 2:03 a.m. - Jagadish: Nice effect. and thank you for the article
Aug. 26, 2009, 3:18 p.m. - weekendrush.com: great script, wish the transparency on the reflection worked in chrome and safari.
Oct. 12, 2009, 4:14 a.m. - Mrinmoy Ganguly: This is a real good one. It adds that extra effect to the webpage. Good work!
Nov. 8, 2009, 9:29 a.m. - How?: How do i change image on this?
Feb. 25, 2010, 5:03 a.m. - Laxman Thapa: This doesnot work on 3.0.18. Anyway, nice stuff.
March 11, 2010, 4:46 a.m. - Edaw: nice but can it be done on a button with an image rollover still with a reflection?