Spanning H2 Elements for Image Replacement

Beyond their primary use, which as you know is aimed at keeping the visual presentation of one or multiple HTML pages isolated from the structural markup, style sheets have been used in the last few years for some other purposes that very often walk the thin gray area that separates both presentational and behavioral layers.

Good examples of these “extreme” cases are drop-down menus, where the functionality of CSS is exploited not only to give the elements of the menu a pleasant look, but to define their behavior in response to specific mouse events as well. Drop-down menus aren't the only case where style sheets directly affect the behavior of web page elements; there are a few others that are equally illustrative, as you’ll see below.

Frankly speaking, most CSS-based image replacement (IR) methods are commonly used to modify the behavior of certain web page elements to hide the elements’ inner text from display, while keeping the assigned background image visible.

As with other techniques that involve a rather tricky use of CSS, some IR approaches are slightly harder to implement than others. That’s exactly the case with the one that I left off discussing in the last installment of this series. In that tutorial I explained how to apply the IR method created by Todd Fahrner to the H1 header of an XHTML document, which required the use of a couple of additional <span> tags to hide the text wrapped by the header via a “display: none” CSS declaration.

In this particular case, the method was implemented with a single web page header, but it’s easy to extend its use to other text-based elements. Provided that the topic has caught your attention, in this fifth installment of the series I’ll be discussing how to apply the aforementioned IR method to all of the H2 headers included in a sample web document.

Want to learn how this will be achieved in a few simple steps? Then begin reading right now!