Making a clickable area from a background image in CSS

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:

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):

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

38 comments

  1. I don’t understand how it works. Could you be more idiot-proof with your explanations please?

    Thanks. Tod.

  2. When you use a background image on a div or other element in a cascading style sheet, the image is ‘glued’ to that element – it isn’t included as an image in your HTML file, so you can’t make it clickable by putting an anchor tag around it.

    So instead you have to create a transparent box that you can position right over the top of the div with your background image, over the part that you want people to be able to click. You make the box in your CSS stylesheet, then give it an absolute position right on top of the div. Does that make sense?

    If not, I’ll put together an example.

  3. Hi, that’s exactly what I want to do – OK I have the transparent box positioned, but pasting in your code doesn’t work – ie the pointer doesn’t turn to a hand and nothing clickable.

    I first tried this –   but that didn’t work either.

    Any ideas why pasting your html didn’t work?

    Rob

  4. Sorry the html after “I first tried this” has not come out – I’ll leave out the brackets – it was ‘a href=”http://www.robhealey.com.au/Contact”> 

  5. Rob – I think it was that I had used the wrong ID on the link – I’m trying to get this formatted but you can read it at least…

    Change the ID to match the one in the CSS code snippet above the link snippet.

  6. I’m using a background image in wordpress and positioning the transparent box is throwing all my other page elements out. I’m pasting the code a id=”logo-zone” href=”free-gift”. Any suggestions?

  7. That did the trick Debbie… your code above did not have /a> but the page you referred me to made it all clear. Thanks a lot

  8. Thanks David… I’d been meaning to do this for a while now and your post finally made me. I’ll also put a note in this post about checking out the tutorial instead. 🙂

  9. Hey, When I implement the above method with the border as 1px, it looks fine in Ie and FF but the clickable area is not the sameIE. I am guessing that its hiding behind the main image and the hand cursor is seen only in ~20px in the top and in the left side and rest has the border but not clickable. Is there anything I am missing here?thanks
    pragan

  10. pragan: set the “zoom” property to the absolutely positioned div. Like so:

    #absolutely_pos_div {
    zoom: 1;
    }

    This did the trick for me.

  11. I put in and took out the div, got the yellow border in IE 7 but thats the only thing thats clickable, noting INSIDE the border is clickable. I dont want to do what others suggested, is make duplicate images of my buttons. HTML works ok but funny in different ways. but when you make a rectangle in html map, the whole rect is clickable, here it is not.

  12. Thanks for the quick tutorial. I used it on this site and it worked great. I think this is much easier than the old method of using image maps.

  13. only part of the box work as clickable, looks like some other area is overlaping with the is box. don’t know how to make all the box clickable. I have included z-index=3, 4 .. 100 .. noway . sitll only part of the box clickable.

  14. I’ll right away take hold of your rss as I can not in finding your e-mail subscription hyperlink or e-newsletter service. Do you’ve any? Please let me know in order that I may just subscribe. Thanks.

  15. Greetings I am so thrilled I found your site, I really found you by accident, while
    I was browsing on Askjeeve for something else, Anyways I am here now and would just like to say thank you for a
    fantastic post and a all round enjoyable blog (I also love the theme/design), I don?t have time to
    read it all at the moment but I have book-marked
    it and also included your RSS feeds, so when I have time I will be back to read a lot more,
    Please do keep up the fantastic work.

  16. Hello there, I found your web site by means of Google at the same time as searching for a related matter, your website came up, it seems great. I’ve added to favourites|added to bookmarks.

  17. I just like the helpful information you supply for your articles. I will bookmark your blog and check again here frequently. I’m rather certain I’ll be informed plenty of new stuff proper here! Best of luck for the following!

  18. Great script. I followed the steps but it’s placing the box behind the background image! Is there a way to force it to be on top of the background image?

  19. Hi, that was a great tutorial. My question is how do you implement the same with re-sizable background images?
    Present users may have computers with different resolutions. What if you want to re-size your image and have similar areas clickable on the resized image?

    Thanks!

  20. That’s a really good question – I don’t have an answer for it yet because I haven’t encountered it in my own work. But I’m sure I will at some point.

  21. This was awesome, thanks for posting it. The embedded link was missing the closing “/a” tag which left a visual issue in IE. Once I added that I was good to go.

    It was especially easy to precisely position the box by changing background color to red while working. Thanks again for taking to time to provide this.

Leave a Reply

Your email address will not be published. Required fields are marked *