NOTE: This post has been replaced by a full-fledged tutorial – you can find that here. Please go there and don’t try what you see here; WordPress mangles my code snippets no matter how I try to get them displayed. The new tute is much better, I promise.

———————

This is a neat little trick that will allow you to create multiple clickable areas over any background image. This is easier, to me, than making image maps used to be.

Create a transparent box, absolutely positioned, that fits right over the top of the section of background image you want to make clickable. It’s easier to give this box a background-color while you’re getting it into position. The CSS looks like this:

/* This is the logo link clickable area */
#logo-zone {
position: absolute;
top: 18px;
left: 11px;
height: 21px;
width: 240px;
background-color: transparent;
}

Obviously you’ll change the ‘top’ and ‘left’ positions to line up with the top left corner of your background image’s clickable section, and adjust the ‘height’ and ‘width’ to fit.

Within the HTML, add an href link with the ID of your clickable box (WordPress won’t let me put this next link in here without screwing it up – remove the x from xhref):

<a id=”logo-zone” xhref=”yourlink.com” >

Pretty simple, and you can create multiple clickable areas wherever you need them on your page.

Share It:

« »