Spanned Fish

Everytime that I design a website, I have to use clickable images. The simpler, very simpler way is to do as presented below :

<a href="http://spannedfish.com/"><img src="logo.gif"/></a>

But this solution is not very accessible. If the user disable image rendering, he will see nor the logo nor alternative text.

So we’ll use a trick found at Haacked that I’ve just modified and used for one of my blogs. The aim is to use a W3C XHTML 1.0 Strict valid code that will allow a css background to be clickable. Here is the code you should have in your html page :

<div id="header">
        <a href="http://spannedfish.com/">
        <span>Alternative Text</span>
        </a>
</div>

There is the CSS code to include in your style sheet

#header
{
    background: url(logo.gif);
    width: 180px;
    height: 135px;
    position: relative;
}
 
#header a
{
    position: absolute;
    top: 0;
    left: 0;
    width: 180px;
    height: 135px;
}
 
#header a span
{
    display: none;
}

The width and height in the CSS must correspond to your image size. Note that the position attribute, as well as the margins can be changed.

<span> Fish </span>