Making an image map from a CSS background image

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

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.

4 comments

  1. I was using this tutorial the other week, but found that the ‘visibility:hidden’ didn’t work as expected in IE6. For me, it hides the link as well as the type, even though only the link text is in the italic tags, and I used #nav a i (where #nav replaces #menu). If it works for you, it must be typo on my part – any thoughts on what to look for?

  2. Hi Julie –

    I’m not sure if I can find your issue, but I did find an error in my code. I combined a few steps from the tutorial so did not have a #menu item defined.

    Here are my changes:

    I removed the ‘id=button_link’ from the link in the HTML file – this example doesn’t need it.

    Then I changed #menu to #button:

    #button a i { visibility: hidden; }

    It’s simpler, and still working for me in IE6 and 7 (and FF). Does that help at all?

  3. Simpler is always good! I’ll take another look at mine and see if your changes will help mine at all. Thanks!

  4. Fixed! For future reference, I had my background image in the body tag, not the book/container div. As soon as I moved it, IE6 fell into line :)

Leave a Reply

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