Assigning Negative Indentation to Hyperlinks for Image Replacement - Including the CSS code in a sample web page
(Page 4 of 4 )
If you’re wondering if it’s possible to use the same image replacement method with multiple web page elements, the example below should answer your question. It defines a basic XHTML file that styles H1, H2 and <a> tags by using the background images that you saw in the previous segment. Take a look at the corresponding code sample:
<!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;
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>
<div id="wrapper">
<div id="header">
<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>
<div id="content">
<h2>Main content section</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">Read more on this topic...</a>
</div>
<div id="footer">
<h2>Footer section</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">Read more on this topic...</a>
</div>
</div>
</body>
</html>
Thanks to the clever implementation of Mike Rundle’s IR method, decorating HTML headers and hyperlinks with a few fancy background images was a fairly simple process, and best of all, it didn’t require us to alter a single section of the structural markup. And last but not least, here’s the screen shot that shows the output rendered by the browser when testing the above code sample:
In summary, if you’re looking for an image replacement technique that is easy to learn and implement, the one we've been discussing might be an option worth considering.
Final thoughts
That’s all for now. Over this third episode of the series I demonstrated how easy it is to implement the image replacement method developed by Mike Rundle simultaneously on H1, H2 and <a> elements on the same XHTML page. Of course, if you need a full reference for this method, I suggest you to check Mr. Rundle’s blog, which provides plenty of useful information, indeed.
In the next tutorial, I’ll be covering another popular image replacement approach, which will produce a result similar to Rundle’s, but at the expense of using a couple of additional <span> tags.
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. |
/ 3 
