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:

Without a doubt, the best way to see how Fahrner's image replacement approach does its business is by means of a complete example that shows the interaction of the prior CSS block and the corresponding markup. In keeping with this requirement, below I coded a web page similar to the ones that you saw in previous examples, which shows this method in action. Here it is:

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

<head>

<title>Fahrner Image Replacement (FIR) on H1 elements</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;

margin: 0;

padding: 0;

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

}

#header h1 span {

display: none;

}

</style>

</head>

<body>

<h1><span>Welcome to our website</span></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>

</div>

<h2>Main content section</h2>

</div>

<h2>Footer section</h2>

</div>

</body>

</html>

As seen in the above example, the <h1> element being styled naturally includes the extra <span> tags that I discussed in the previous section, which are responsible for hiding the header's inner text from view. The rest of the web page's XHTML is indeed self-explanatory, so feel free to skip over it and look at the following screen shot, which shows the output produced by the example in question:

Obviously, the final result of using Fahrner's approach is very similar to the one generated by Rundle's, even though the former requires coding additional markup. That's exactly the reason why this method has been discarded in favor of its enhanced version, which also uses two extra <span> tags, but in a much more clever way.

For the moment, though, feel free to give the previous code sample a try. It will surely fire your spark of creativity and give you new ideas for how to improve this image replacement approach.

Final thoughts

In this fourth part of the series, I explored yet another 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.

As you may have guessed, the two major drawbacks to using this IR method are simple to spot: first, it requires additional, non-semantic markup to perform the whole replacement process, and second, if the background image fails to be displayed on the screen, the targeted element automatically becomes inaccessible.

Even though there exist improved versions of it, the method deserves a closer look, at least for educational purposes. Therefore, in the next tutorial of this series, I'll be discussing how to use it with all of the H2 headers included in a web page.

Don't miss the next part!

DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.