Detailed explanation of the common image replacement technology in Web page making

Web page first, the actual application

Slightly

Second, image replacement

We do not always want words to stay on the background image, many works are deliberately hidden in the title and other elements of the text, replaced by a vivid picture.

Designers can use a background image to replace the original text in an element in order to display a more beautiful font. In order to show respect for the inventor Todd Fahrner, this technique was later called "Fahrner image replacement (Fahrner images Replacement,fir)". The implementation of this technique is simple: surround the text in the element with span, and then hide the text in the span by applying a CSS style, and finally apply the background image to the element. For example, for the following HTML markup:

&LT;H1 id= "PageHeader" ><span>webjx.com</span>We can use the following CSS to easily implement image replacement:

#pageHeader {
Background:url (lemonfresh.gif) top left no-repeat;
width:400px;
height:20px;
}
#pageHeader span {
Display:none;
}
Through the use of CSS display:none or visibility:hidden; So the span elements in the #pageheader element are hidden. Hellsing also uses both of these CSS settings-but their results are consistent. The technology of image replacement is very powerful and very popular soon--without it, we can't even build a zen garden. This technology can be said to achieve a complex, flexible CSS layout of the most important cornerstone of a port.

third, the image replaces the technical responsibility

Image replacement technology uses display:none; it's not just about replacing text, there are some deeper reasons to do so. In fact, without any hint or help, the computer cannot recognize or read the text contained in the image. For example, an IMG element in HTML, without the ALT attribute, would be meaningless for a search engine such as Google, or for a client that cannot render an image, such as a reader can read the content of the page and tell the viewer in the form of a voice. While image replacement technology retains the original text in the element being replaced, understanding the page content is no problem for any customer.

But there is another problem with image substitution: Google is able to read hidden text, while some screen readers cannot. The original idea of image replacement technology is to make the information of image transmission available to the visually inconvenient users, but in fact it does not achieve the desired goal. Not only that, if the user disables the image in the browser, but still retains the CSS, then nothing will appear on the screen. And some of the extra span also increased the size of the page file, although not the big impact, but after all, the water is ideal.

Iv. Better Technology

As the technology of image replacement becomes popular day by day, these problems are gradually getting more and more people's attention. Is there a technology that can hide unnecessary elements for ordinary viewers and give them to people in need? Fortunately, while the technology of figure substitution is becoming popular, other alternative technologies are beginning to mature. Some of these are some of the most basic requirements for the killer, leaving one or two outstanding questions: Others require a lot of CSS tricks and hack to achieve cross-browser compatibility. In writing this book, there is no perfect alternative, we can only after weighing the pros and cons, according to the actual needs of these existing programmes to select.

1.Leahy and Langridge schemes

Seamus Leahy and Stuart Langridge found this method independently. This method eliminates the need to add extra <span> tags and hides the contents of elements in the page while ensuring that the screen reader can read the text normally. Unfortunately, since the 6.0 version of the browser does not adhere to the box model, so for such browsers, we must also use some special techniques to achieve compatibility.

HTML

CSS

#header {
padding:25px 0 0 0;
Overflow:hidden;
Background-image:url (cola.gif);
Background-repeat:no-repeat;
height:0px!important;
Height/**/:25px;
}
Advantages:Screen readers are available for normal access; no extra <span>.

Disadvantages:There is no solution to the accessibility of a blank page after the browser disables the image; The implementation requires hack.

Browser support:Windowsinternet Explorer 5.0+, Netscape 7, Opera 6+, Firefox. Macintoshinternet Explorer 5.2, Safari, Firefox.

2.Rundler of the scheme

Designer Mike Rundle A method that uses a negative Text-indent property value to push text out of the left edge of the screen. Although the applicability of the scheme is not widespread--ie 5.0 will bring the background picture along with the text to the viewer's line of sight-but quite concise and elegant.

HTML

CSS

#header {
Text-indent: -5000px;
Background:url (sample-image.gif) no-repeat;
height:25px;
}

Advantages:Screen readers are available for normal access; there is no extra <span>; simple and elegant CSS.

Disadvantages:There is no workaround for the accessibility of blank pages after the browser disables the image, and is sometimes not available in IE 5.0.

Browser support:Windowsinternet Explorer 5.5+, Netscape 7, Opera 6+, Firefox. Macintoshinternet Explorer 5.2, Safari, Firefox.

3.Levin of the scheme

Levin Alexander came up with a brilliant idea: instead of putting text in span, move it out of span, put text and span together in the parent element, and then use the blank span to overlay the text and apply the background image to the span. If all goes well, screen readers will be able to access the text normally, and also fully consider and resolve the accessibility issues of blank pages after the browser disables the image. But the new problem is that the image cannot be transparent, or the user will see the text below. And the CSS needed for such a solution is extremely verbose and difficult to understand.

HTML

CSS

. replace {
position:relative;
margin:0px; padding:0px;
/* Hide Overflow:hidden from Ie5/mac \*/

Overflow:hidden;
/* */
}
. replace span {
Display:block;
Position:absolute;
top:0px;
left:0px;
Z-index:1; /*for Opera 5 and 6*/
}
#myh1, #myh1 span {
height:25px;
width:300px;
Background-image:url (thyme.png);
}

Advantages: screen readers can be accessed normally, resolving the problem of accessibility of blank pages after the browser disables the image.

Disadvantage: cannot use transparent image; CSS code is verbose.

Browser support: Windowsinternet Explorer 5+, Netscape 7, Opera 6+, Firefox. Macintoshinternet Explorer 5.2, Safari, Firefox.

V. Selection

Which method should be used? It has to be your choice. Leahy/langridge, Rundle, or Levin's solution is still the best option until the day when most browsers support the "CSS generated content" mentioned earlier. If the image replacement technology does not appear, so many of the Zen garden and Hellsing of revolution similar works are not possible to achieve. In the request for future submissions, the Zen garden has made this clear, encouraging the discovery of more accessible and compatible image alternatives.