A reflection.js for Internet Explorer?

March 25th, 2006

A while ago I created a canvas image reflection script. This script allowed you to add reflections to images on your website by simply adding a class="reflect" attribute to the image. 

The canvas image reflection script works in Firefox 1.5, Opera 9 and Safari 2. It doesn’t work in Internet Explorer 6 or Internet Explorer 7, but it degraded nicely in IE.

Even so, I’ve had a lot of e-mail and comments asking for Internet Explorer support. I came across Microsoft’s DXImageTransform filters again the other day and I’ve been able to reproduce a reflection in Internet Explorer. The Internet Explorer reflection also involves the use of CSS sprites.

Reflection in Firefox and IE

One of these reflections was created in Firefox 1.5 using the <canvas> tag. The other one was created in Internet Explorer 7 using Image Transforms. They look pretty similar to me so I think it could well be possible to modify reflection.js in such a way that it’ll work in Internet Explorer too.

(Ok, the one on the right is Internet Explorer)

I should mention that the above screenshot still shows a very early prototype - at the moment it’s using inline code and I want to tidy it up and make sure it works properly before releasing a demo.  

Related Posts

  1. script.aculo.us reflection
  2. Cross Browser Image Reflection
  3. Reflection.js 1.0
  4. PHP Reflections
  5. Reflection.js 1.7

Trackback URI | Comments RSS

Leave a Reply