Wrapping Hyperlinks with Span Tags for Image Replacement

Frankly speaking, applying the image replacement method that you learned in the previous segment to a few web page links is a process that doesn't different too much from styling HTML headers. In this particular case, the method will be implemented only with <a> elements that have been assigned a "fancy_link" CSS class, but as you may guess, it's possible to use the method with all of the links included in a web document.

Having said that, please focus your attention on the following CSS styles, which perform the aforementioned image replacement process in a snap:

.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;

}

Definitely, that was easy to code and read, wasn't it? As shown before, by adding a couple of <span> tags to all of the <a> elements with the CSS class "fancy_link" will make them appear on screen decorated with the following background image:

Of course, if the web page contains many links that need to be styled in this manner, the process can be pretty annoying, considering that each link must include extra markup that has no true semantic meaning. However, if you find that this method suits your requirements, then you'll have to learn to live in harmony with that issue.

Having shown the set of CSS styles that implements Fahrner's approach, now it's time to tie them to the corresponding structural markup, so you can see how they can be put to work together. Therefore, in the last section of this tutorial I'll be coding another sample web page that will show the final result of this image replacement process.

Now, click on the link below and keep reading.