Inline Image Replacement (warning: hack alert)
In the process of designing the UI for indicating user's progress in a tabbed form, I realized I needed inline image replacement in order to accomplish exactly what I needed. The pure CSS solution works in Mozilla, Safari, and Opera, and should work in IE7 with some tweaking. IE6 will only work with JavaScript in place to convince it of what it should do.
The hack comes in, since I have only tried this with one set of transparent PNGs and this will probably take a fair amount of pounding on before it can stand up to wide usage. It also (for now) requires a solid background color.
Nevertheless, IIR. Suggestions actively encouraged... So far it works transparently (no pun intended) with screen readers, though the replaced text does go missing without the image there.
Labels: advanced ajax, css
2 Comments:
Oooooh Looks like a fun little project..
NOte; your current implementation doesn't work in either flavors of IE.. shocker..
I'll try to write something without looking at your code to see what I come up with..
I've been meaning to write my own page search/replace functionality to do stuff like this..
"NOte; your current implementation doesn't work in either flavors of IE.. shocker.. "
Yeah, but I have a feeling IE7 will make it easier than IE6.
Of course, with Opera you can simply say:
.iir {
content: 'whatever you want';
}
...but nobody else supports that, yet.
Post a Comment
Links to this post:
Create a Link
<< Home