Generally to insert an image in an HTML document, we use <img> tag. The problem with <img> is when the images are disabled by browser. Adding alternative text using the alt attribute disallows HTML markup and causes problems with some search robots.

The solution to this problem is “Image Replacement”. The HTML and CSS are used to show the image.

Issues with Image Replacement

In earlier, the FIR (Fahrner Image Replacement) was used to perform Image Replacement technique. A very big issue is the text and the image will not be displayed when the CSS is disabled by browser.

Best Technique

We should display either the text or the image in the web page, even though both image and the css are turned off. However Dave Shea’s Revised Image Replacement technique is the best one to achieve this.

HTML part

<h3 id=”header” title=”Revised Image Replacement”>Revised Image Replacement</h3>

CSS part

#header
{
width: 329px;
height: 25px;
position: relative;
}

#header span {
background: url(sample-opaque.gif) no-repeat;
position: absolute;
width: 100%;
height: 100%;
}

In the above example to display the image, instead of img tag, we use the background image. The alt tag is the reason to get the hover effect but here it is not. So the title tag of the header h3 does that job.

This technique is credited to Dave Shea.