Wrapping Hyperlinks with Span Tags for Image Replacement - Review: using Fahrner's image replacement method with H2 elements
(Page 2 of 4 )
If you still haven't read the previous part of the series, aimed at showing how to apply Fahrner's image replacement method to the H1 and H2 elements of a basic XHTML page, I reintroduced this example below so you can analyze it in detail and catch its underlying logic.
First, here's the background images that I used to polish the visual appearance of the H1 and H2 headers respectively:
And here's the web page that puts Fahrner's technique into action:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fahrner Image Replacement (FIR) on H1 and H2 elements</title>
<style type="text/css">
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;
}
/* apply image replacement on H2 elements */
h2 {
width: 300px;
height: 150px;
margin: 0;
padding: 0;
background: url(h2.png) top left no-repeat;
}
h2 span {
display: none;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<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>
<div id="content">
<h2><span>Main content section</span></h2>
<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>
<div id="footer">
<h2><span>Footer section</span></h2>
<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>
</div>
</body>
</html>
As you can see above, each HTML header being decorated wraps up its inner text with the pair of <span> tags mentioned in the introduction, thus hiding it from view via a "display: none" CSS declaration. In addition, to complement the previous code sample, here's a cropped screen shot that shows how the web page is rendered on the browser:
Here, it becomes evident that the major accessibility issue suffered by this method is an eventual failure when downloading the corresponding background images. That problem will keep the headers' text hidden forever, or potentially until the web page is reloaded.
However, this problem has been fixed in an updated version of this method, so for the moment I'll keep exploring its functionality in its current implementation. Remember that I mentioned at the beginning that the method could also be used with hyperlinks? Well, in the following segment I'll be explaining how to achieve this in a few simple steps.
Now, click on the link that appears below and read the section to come. I'll be there, waiting for you.
Next: Styling some hyperlinks >>
More Style Sheets Articles
More By Alejandro Gervasio
