Turning a background image into a clickable link
I had been trying to find the best approach to making my header logo into a clickable link that would return to the home page of one of my websites ( bearcatnews.com ). The problem was that I really wanted to leave the image inside my style sheet instead of marking it up inline.
Since there is no way that I know of to make a background image a clickable link, I decided to assign the "onclick" event to the div tag that contained my background image.
Here is the result:
HTML Markup -
<div id="header">
<div id="logo" style="width:300px;height:69px;cursor:pointer"
onclick="location.href='/'"> </div>
</div>
CSS -
#logo {
margin: 0;
padding: 0;
background: #2e2e2e url("/img/mainlogo_top.gif") no-repeat;
}
A couple of notes...
1. The image "mainlogo_top.gif" happens to be 300x69 which matches the div size for the html markup on the link hotspot.
2. I could have attached the background image to the parent div tag if I wanted to. You could then use the inner div tag to make the link hotspot whatever size you choose rather than making it the same size as the image.