Image Replacement Reflection
May 12th, 2006
I found this through referral logs. It’s a modification of reflection.js so it can be used with image replacement. Image replacement is supposed to be a more accessible way of including an image which contains text into a webpage.
The most simple method of image replacement is as follows:
<h1><span>Cow's Blog</span></h1>
h1 { background-image: url(backgroundimage.gif); width: 200px; height: 50px; }span { display: none; }
The idea is that screen readers and other tools will still get the original text. The example of image replacement I’ve given is a very old method which has been replaced by newer methods but the general idea is the same.
It’s quite interesting seeing the demo of the reflection script with support for image replacement (I had to refresh it once before it worked presumbly because the image was not in memory the first time the script loaded.
Safari Woes
Some users have experienced some problems using reflection.js with Safari. It seems that with images where the height is greater than the width, the reflection does not show correctly. We’ve made a bit of progress (scroll down the comments) but I don’t have a Mac nor do I know the ins and outs of Safari.
If any web developers who use Javascript are around, we’d love your help.
vBulletin Reflection
Came across this very nice modification for vBulletin which adds image reflections to avatars on your forums and a new [imgreflect] BBCode for members to add reflections to a image they post.
| 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(3)
Added vBulletin Reflection Mod.
Hey how can i tell it to only use 25 % of the original picture then add the reflection
You can’t do this yet; I’m going to try and implement it in the next version.