STYLE SHEETS

Using Span Tags for Image Replacement

In this fourth part of a six-part series on image replacement, I explore a CSS-based image replacement method originally created by Todd Fahrner. It bases its functionality on using a couple of extra <span> tags to hide the text wrapped by a targeted web page element, while keeping its background image visible.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 3

November 25, 2009

TABLE OF CONTENTS:

As always, before I start explaining the logic that drives the image replacement method developed by Todd Fahrner, I'd like to take a quick look at the example created in the last tutorial. It illustrated how to implement Mike Rundle's approach to decorate the H1, h2 and hyperlinks of a web page with some fancy background images.

Below are the images in question, which admittedly are a demonstration of my limited graphic design skills, so bear with me on this:

Having shown the graphics used for styling the aforementioned HTML elements, here's the sample web page that shows how to put Rundle's approach in action. Take a look at it, please:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Mike Rundle's Image Replacement on H1, H2 elements and links</title>

body {

padding: 0;

margin: 0;

background: #fff;

font: 1em Arial, Helvetica, sans-serif;

color: #000;

}

#wrapper {

width: 960px;

margin: 0 auto;

background: #ffc;

}

#header, #content, #footer {

padding: 20px;

}

/* apply image replacement on H1 element */

#header h1 {

width: 400px;

height: 200px;

background: url(h1.png) center center no-repeat;

text-indent: -9999px;

}

/* apply image replacement on H2 elements */

h2 {

width: 300px;

height: 150px;

background: url(h2.png) center center no-repeat;

text-indent: -9999px;

}

/* apply image replacement on links with this class */

.fancy_link {

display: block;

width: 200px;

height: 50px;

background: url(fancy_link.png) center center no-repeat;

text-indent: -9999px;

}

</style>

</head>

<body>

<h1>Welcome to our website</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet. Quisque rhoncus sodales sapien ac blandit. Nam lacus urna, commodo eget tincidunt vitae, ullamcorper at nulla. Vivamus ac iaculis justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam erat volutpat. Sed quis elit erat, et ultricies diam. Phasellus non turpis malesuada erat ultrices tincidunt sed vitae magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis purus risus, lacinia at faucibus id, luctus nec diam. In nulla neque, consequat ac hendrerit ac, pulvinar eu dui. Aenean in arcu felis, non hendrerit est.</p>

<a href="#" class="fancy_link">Read more on this topic...</a>

</div>

<h2>Main content section</h2>

<a href="#" class="fancy_link">Read more on this topic...</a>

</div>

<h2>Footer section</h2>

<a href="#" class="fancy_link">Read more on this topic...</a>

</div>

</body>

</html>

Definitely, you should agree with me that the previous XHTML page has nothing special, except that it shows how to apply the aforementioned image replacement method to its H1, H2 and <a> elements, without amending its markup with additional tags. What's more, if you want to see the output generated when the page is parsed by the browser, the following screen capture should fulfill your expectations:

Well, as you can see above, decorating text-based web page elements by using Rundle's approach is a fairly straightforward process that can be tackled with minor headaches. By far, the weakest point of this approach rests on its incapacity to deal with background images that fail to download properly. However, if you can live with this issue (although users of your websites might have a different opinion), this method is certainly one of the simplest to learn and implement.

So far, so good. Having already covered from top to bottom the first of the image replacement techniques that I plan to discuss in this series, it's time to take a close look at another one, which requires the use of a couple of <span> elements to work as expected.

To learn the full details concerning the implementation of this brand new IR approach, please click on the link below and read the section to come.

Next: Working with non-empty span tags >>