In the old days of Web Design, 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 much easier… no splicing images and no trying to find a tool to build your coordinate system!

1. Build your image that you’d like to use. You can utilize this graphic below… (just right-click and save as to download):
   
2. 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.
3. 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>

4. Edit your Cascading Style Sheet. You will be adding 6 different styles. 1 style for the overall div, 1 for the a 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('/images/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: 70px;
margin-top: 5px;
}
#mobile { /* Mobile Link */
float: left;
position:absolute;
width : 50px;
height: 50px;
margin-left: 130px;
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!