CSS image replacement
It is proposed that this article be deleted because of the following concern:
If you can address this concern by improving, copyediting, sourcing, renaming, or merging the page, please edit this page and do so. You may remove this message if you improve the article or otherwise object to deletion for any reason. Although not required, you are encouraged to explain why you object to the deletion, either in your edit summary or on the talk page. If this template is removed, do not replace it. This message has remained in place for seven days, so the article may be deleted without further notice. Find sources: "CSS image replacement" – news · newspapers · books · scholar · JSTOR Nominator: Please consider notifying the author/project: {{subst:proposed deletion notify|CSS image replacement|concern=How to}} ~~~~Timestamp: 20061118022843 02:28, 18 November 2006 (UTC) Administrators: delete |
Fahrner Image Replacement is a web design method that replaces HTML text on a page with an image file containing said text. This keeps the web page accessible for screen readers, text browsers, and those browsing with style sheets or images turned off.
The original coding used a heading with the background of desired image, and a span with the actual text of the page. Then through style sheets the span was set to "display:none" to prevent it from showing up.
Code Example:
<h3 id="firHeader"><span>Sample Headline</span></h3> #firHeader { width: 300px; height: 50px; background: #fff url(firHeader.gif) top left no-repeat; } #firHeader span { display: none; }
This however was not with out its downfalls, as it was discovered some screen readers will not read any element that was set to "display:none".
Because of this, newer methods were developed
The Phark Method again uses text indent to push the text out of the display box, and then hides all the overflow. This solves screen reading problems, but doesn't address a situation where css is on, but images are turned off (or fail to load).
Code Example:
<h3 id="header"> Revised Image Replacement </h3> /* css */ #header { text-indent: -5000px; background: url(sample-opaque.gif); height: 25px; }
Shea Method
The Shea Method solves both images/css on/off problems and screen reader issues, but does require one extra span element. The span element is absolutely positioned over the text element, effectively hiding it. If the image fails to load the text behind it is still displayed.
Code Example:
<h3 id="header" title="Revised Image Replacement"> <span></span>Revised Image Replacement </h3> /* css */ #header { width: 329px; height: 25px; position: relative; } #header span { background: url(sample-opaque.gif) no-repeat; position: absolute; width: 100%; height: 100%; }