How To Build Anchor Tag Regions Over A Background Image Using CSS

Douglas KarrOct 02, 2007

2 minutes read

In the days of Web 1.0, a collection of links like this could be built by splicing up your image with links on each graphic, then trying to sew it all back together with a table. It could also be accomplished by utilizing an image map but that usually requires a tool to build out the coordinate system.

Utilizing Cascading Style Sheets (CSS) makes this a ton easier… no splicing images and no trying to find a tool to build your coordinate system! You simply add a background image to a div and then use absolute positioning to specify the width and height of each of the regions that you want to be linked.

Build the image that you’d like to use. You can utilize this graphic below (right-click and save as to download)

Upload your image to a directory that’s relative to your CSS. In WordPress, this can be done easiest by placing it in an images folder in your theme directory.
Add your HTML. It’s nice and simple… a div with three links in it:

<div id="subscribe">
    <a id="rss" href="[your feed link]" title="Subscribe with RSS"><span class="hide">RSS</span></a>
    <a id="email" href="[your email subscribe link]" title="Subscribe with Email"><span class="hide">Email</span></a>
    <a id="mobile" href="[your mobile link]" title="View Mobile Version"><span class="hide">Mobile</span></a>
</div>

Edit your Cascading Style Sheet (CSS). You will be adding 6 different styles. 1 style for the overall div, 1 for the anchor tag so it doesn’t display any text decoration, 1 style to hide the text (used for accessibility), and 1 style specification for each of the links:

#subscribe { /* background image block */
    display: block;
    width: 215px;
    height: 60px;
    background: url(http://martech.zone/wp-content/uploads/2007/10/options.png) no-repeat; 
    margin-top: 0px; }
#subscribe a { text-decoration:none; } 
.hide { visibility:hidden; } 
#rss { /* RSS Link */ 
    float: left;
    position:absolute; 
    width: 50px; 
    height: 50px; 
    margin-left: 20px;
    margin-top: 5px; } 
#email { /* Email Link */ 
    float: left; 
    position:absolute; 
    width: 50px; 
    height: 50px; 
    margin-left: 80px; 
    margin-top: 5px; } 
#mobile {  /* Mobile Link */ 
    float: left; 
    position:absolute; 
    width : 50px; 
    height: 50px; 
    margin-left: 150px; 
    margin-top: 5px; }

The positioning is nice and simple… add a height and width and then set the left margin from the left side of the image, and the top margin from the top side of the image!

UPDATED 10/3/2007 for better accessibility with the advice of Phil!