Assigning Negative Indentation to Hyperlinks for Image Replacement

As I expressed in the section that you just read, using the previous image replacement technique with some web page links is indeed a no-brainer process that can be tackled with minor hassles. To demonstrate this, in the lines to come I’ll define a brand new CSS class called “fancy_link,” which will use the following background image to polish the visual appearance of targeted links:

Having created this basic graphic, here’s the CSS class that performs the replacement task in all the web page elements that have been assigned the aforementioned “fancy_link” CSS class:

.fancy_link {

display: block;

width: 200px;

height: 50px;

background: url(fancy_link.png) center center no-repeat;

text-indent: -9999px;

}

Since my goal here is to demonstrate how to apply image replacement to some hyperlinks, the previous “fancy_link” CSS class includes a “display: block” declaration. If you plan to use this approach with block-level elements, though, make sure you remove that line of code.

The other declarations that make up this CSS class speak for themselves, so I won’t spend more time explaining its inner workings. Instead, it’s time to see how this class can be used along with the ones created before to apply this IR approach to H1, H2 and <a> elements, all at the same time, on the same web document!

Illustrating this process will be the last step of this tutorial, so click on the link below and read the final segment.