Today I was working on an ad banner for one of my clients. This banner used a large background image, but they wanted to make a button in the image clickable.
I wasn’t sure how to do this but I found a handy tutorial on A List Apart.
Now I didn’t write this – I’m just summarizing the important points. I’d refer you to the original article for more information, it tells how to make multiple clickable areas on a background image.
In your XHTML file, add in this code:
This defines an area ‘button’ that we’ll use for the clickable area and sets its link target. The author used the semantically meaningless ‘i’ tag to wrap it, as I did here (but WordPress keeps changing it to em’s no matter what – it’s supposed to be ‘i’), but we’ll make that text invisible in just a minute.
Now for the CSS: apply a background image to an element (probably a wrapper or something similar). Then create the ‘button’:
#button a {
position: absolute;
top: 594px;
left: 440px;
height: 26px;
width: 118px;
text-decoration: none;
}
Position it where you want it on the page. Finally, we’ll need to hide the link text (but still provide it for accessibility purposes). This bit of code will make the text within the ‘i’ links invisible:
#menu a i { visibility: hidden; }
And that’s it! This works fine in IE7, IE6, FF, Opera and Netscape.
