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.
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.
| About Ken | |
 | My mission is to demystify the world of mobile technology for general audiences and to communicate how mobile technology can enhance every aspect of our daily lives. I've been maintaining the Ken's Tech Tips website since 2004. I have experience communicating mobile technology and presenting new mobile products both online and offline, including at various trade shows and events. You can check out my profile or drop me an e-mail. |
- Javascript , Reflection , Web Development
- Comments(1)
Having trouble with IE 8 and reflections with hyperlinked images. I am getting borders—do you have a solution? Thanks in advance.