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(https://cdn.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!
