CSS Advanced Skills: Image replacement

Image replacement technology is quite useful, especially for visual design, and does not affect the user base (screen reader) of non-visual browsers to a certain extent ).

This section only uses one image:

 

Classic FIR

Outsourcing a set of span labels in text, and display: none in CSS to hide the span, and then add background-image to the CSS of the original text container, to achieve image replacement.

The HTML code is as follows:

<H3>
<Span> Revised Image Replacement </span>
</H3>

The CSS code is roughly as follows:

# Header {width: 329px; height: 25px; background-image: url(sample-opaque.gif );}
# Header span {display: none ;}

Disadvantages:

The screen reader skips the container that defines "display: none", so that the user cannot know the current text content, and requires a span tag with no semantics to complete this effect. when the image is disabled and CSS is enabled, the user cannot get the content.

Single pixel replacement

Similar to the classical FIR, the text is hidden with span, and a 1 pixel transparent image is added to the original parent container outside span, in addition, the hidden text is added to the alt attribute of the image. When the image is unavailable, the text in alt is used to replace the image, you can also obtain text information when CSS is enabled.

The HTML code is as follows:

<H3>

<Span> Revised Image Replacement </span>
</H3>

The CSS code is roughly as follows:

# Header {width: 329px; height: 25px; background-image: url(sample-opaque.gif );}
# Header span {display: none ;}

Disadvantages:

Silent tag.

RaduMethod

Similar to the Phark method, Radu only runs on IE5 by assigning an external patch to the text to achieve the hidden effect.

The HTML code is as follows:

<H3>
Revised Image Replacement
</H3>

The CSS code is roughly as follows:

# Header {background: url(sample-opaque.gif) no-repeat topright; width: 2329px; height: 25px; margin: 0 0 0-2000px ;}

Disadvantages:

Similarly, the image cannot be closed and the content cannot be obtained when CSS is enabled.

PharkMethod

Use the text-indent feature to hide text.

The HTML code is as follows:

<H3>
Revised Image Replacement
</H3>

The CSS code is roughly as follows:

# Header {
Text-indent:-100em;
Overflow: hidden;
Background: url(sample-opaque.gif );
Height: 25px;
}

Disadvantages:

Similarly, it cannot be displayed when the image is disabled, CSS is enabled, and it cannot be run in ie5.

PharkMethod 2

Fixed the problem of Safari display scroll bar in Phark 1, and the problem that IE5 cannot run.

The HTML code is as follows:

<H3>
Revised Image Replacement
</H3>

The CSS code is roughly as follows:

# Header {
Text-indent:-5000px;
Background: url(sample-opaque.gif );
Height: 25px;
}

Disadvantages:

Similarly, it cannot be displayed when the image is disabled and CSS is enabled.

Leahy/LangridgeMethod

Use the features of overflow: hidden and padding to hide the text.

The HTML code is as follows:

<H3>
Revised Image Replacement
</H3>

The CSS code is roughly as follows:

# Header {
Padding: 25px 0 0 0;
Overflow: hidden;
Background-image: url(sample-opaque.gif );
Background-repeat: no-repeat;
Height: 0px! Important;
Height/**/: 25px;
}

Disadvantages:

Similarly, when the image is disabled and CSS is enabled, the content cannot be obtained. Hack is required for IE's Box prototype. For details, see the translation.

DwyerMethod

A variant of classical FIR that uses the overflow: hidden feature to allow all devices to obtain information, including non-visualized browsers.

The HTML code is as follows:

<H3>
<Span> Revised Image Replacement </span>
</H3>

The CSS code is roughly as follows:

# Header {width: 329px; height: 25px; background-image: url(sample-opaque.gif );}
# Header span {display: block; width: 0; height: 0; overflow: hidden ;}

Disadvantages:

Similarly, the image cannot be displayed. When CSS is enabled, additional silent span labels are still required.

Gilder/Levin Method

It solves the problem of displaying images when CSS is enabled, and allows almost all devices to obtain text information.

The HTML code is as follows:

<H3>
<Span> </span> Revised Image Replacement
</H3>

The CSS code is roughly as follows:

# Header {width: 329px; height: 25px; position: relative ;}
# Header span {background: url(sample-opaque.gif) no-repeat; position: absolute; width: 100%; height: 100% ;}

Disadvantages:

Use a completely blank non-semantic tag span. If the image is a transparent background, the text cannot be hidden.

Lindsay Method

Set the text to 1px, and set the text color to replace the background color of the image.

The HTML code is as follows:

<H3>
Revised Image Replacement
</H3>

The CSS code is roughly as follows:

# Header {
Background: url(sample-opaque.gif) no-repeat;
Width: 329px;
Height: 25px;
Font-size: 1px;
Color: # xxxxxx;
}

Disadvantages:

It can only be used to replace an image with a solid color background, and cannot be used to obtain information when CSS is disabled.

Shea enhanced Edition

Shea adds the title attribute to the container and the title contains the hidden text. In this way, the user can obtain information by activating the mouse tool prompt.

The HTML code is as follows:

<H3title = "Revised Image Replacement">
<Span> </span> Revised Image Replacement
</H3>

The CSS code is as follows:

# Header {width: 329px; height: 25px; position: relative ;}
# Header span {background: url(sample-opaque.gif) no-repeat; position: absolute; width: 100%; height: 100% ;}

Disadvantages:

Extra blank and silent span tag...

The above are almost all existing image replacement methods, each having its own advantages and disadvantages. Choose one based on your own situation.

 

 

 

I have no responsibility to guess: I found this translation on the Internet (it should be a translation, because I found the original article on mezzolblue.com) and did not find any reference to the original article address. I would like to thank the translators for their hard work, add the copyright information to the original English text. Add the following to the reposted article:

Address: http://www.mezzoblue.com/tests/revised-image-replacement/