Wrapping Hyperlinks with Span Tags for Image Replacement - Binding the CSS block to a simple XHTML document
(Page 4 of 4 )
As I said in the preceding section, below I coded a brand new web page that includes a few <a> elements for demonstrating the functionality of Fahrner's image replacement method. Here's how the page in question looks:
<!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>Mike Rundle's Image Replacement on H1, H2 elements and links</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;
}
/* apply image replacement on links with this class */
.fancy_link {
display: block;
width: 200px;
height: 50px;
margin: 0;
padding: 0;
background: url(fancy_link.png) top left no-repeat;
}
.fancy_link 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>
<a href="#" class="fancy_link"><span>Read more on this topic...</span></a>
</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>
<a href="#" class="fancy_link"><span>Read more on this topic...</span></a>
</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>
<a href="#" class="fancy_link"><span>Read more on this topic...</span></a>
</div>
</div>
</body>
</html>
Undoubtedly, understanding the markup of the previous web document is a trivial process that doesn't bear any further discussion. Even so, you should look at the complementary image below, which shows how the targeted links are displayed on the browser, after performing the corresponding image replacement:
For obvious reasons, the output produced by this method is identical to the results obtained with others discussed in earlier tutorials. However, as you saw a moment ago, the inner working of Fahrner's technique is slightly different.
And with this last example, I'm finishing for the moment my introductory coverage of Todd Fahrner's image replacement method. As usual, feel free to edit all of the code samples included in this tutorial. Doing this will give you a more solid background in this CSS-based approach.
Final thoughts
That's all for now. In this sixth part of the series, I demonstrated with some easy-to-follow code samples how to apply Fahrner's image replacement technique to a group of web page links, to make them look slightly more appealing to the eye. While this method seems to be a bit harder to implement than others discussed previously, there's an enhanced version of it, which also uses two extra <span> elements, but in this case to keep the targeted web page element visible even if its background image can't be displayed on screen.
This is indeed a remarkable improvement that's worth looking at. In the next article I'll be explaining in depth the underlying logic of this brand new approach, so you can grasp how to put it to work for you.
Don't miss the upcoming 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. |
