How To Build Anchor Tag Regions Over A Background Image Using CSS
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!
Related Articles
41 Comments
What do you think?
This site uses Akismet to reduce spam. Learn how your comment data is processed.
Doug, that seems like a nice method, but it is very inaccessible.
Consider a blind user with a screen reader, a user with a text only browser or anyone visiting the site without CSS or Images enabled (like, perhaps a mobile user looking for the link to your mobile friendly site). None of them will know about those three links because they have no text. If images are off a user won’t even see alt text to describe what would have been there because it is a background image.
Better would be to slice the images, link them, put them in a list and float them next to each other. Or even use text for the links and replace the text using a standard image replacement technique. This seems convenient, but it makes things much harder/impossible for those not using a standard graphical browser.
I would gently (since you have more expertise) disagree, Phil, each of the links has a title so each is fully accessible. Reading text titles is a capability of accessibility applications such as JAWS. Here’s a good post on titles in links and its impact on accessibility.
Doug,
JAWS doesn’t read link titles by default, but you’re right, it can do. Why would you be looking for link titles if you didn’t know it was there though, and even if you were, surely this drops to a usability issue meaning you are giving less abled users a second rate experience of using your site.
For text browsers, the article you point me towards that Lynx also allows you to bring up a list of link titles, but my point remains that if you didn’t know there was a link there, as there was no text in the first place, why would you look for title text?
Finally, link title attributes still won’t appear for anyone browsing without images enabled or without CSS enabled.
So yes, links with titles are better than those without, but in this case it is only marginal.
This is why using an image, so that alt text can be read, or image replacement, so that the text is there, is a much safer, more accessible and more usable option.
Good Info, Phil. I’m going to try to enhance this with text but simply hide the text – that way an accessible product like JAWS will read the link text and the text will be displayed if CSS or Images are disabled.
I disagree that the only accessible solution would be to put an Image with a link, though.
Updated with some accessibility goodness re: Phil’s concerns.
Nice one Doug!
Sorry to be picky, I just get overly passionate about silly things like this 😀
It’s something that we often don’t pay attention to, Phil! As well, making your application accessible often has good search engine results as well.
I really appreciate the expertise and feedback!
I stole it. There, I said it.
Doug, the graphics are fantastic and the coding is so incredibly simple it scares me (been playing with CSS and now I finally “get it”).
Tweaked up the code to meet my needs, figured out where to drop the HTML bit in, and frankly it looks great and has cleaned up that top of my sidebar that has been driving me INSANE.
I just might have to buy you that coffee yet!
Too cool! Looks great up there William. It’s the ultimate compliment when someone utilizes one of my posts. Thanks!
Doug,
I’m going to be a dissenting voice, using my experience as an example. I remember our emails when my home email changed and you noted I had to simply opt in with my new one. I have to admit I had a heck of a time “discovering” the new feature on your site to opt in again. Part of this was because the original link was a bit more traditional and I vaguely remembered that one. The other was because the sideways half envelope just didn’t look like an envelope to me initially. After about 5 or more minutes I started rolling my mouse over every image and when the “Subscribe with Email” title showed, then I knew I was in business. My brain also figured out what the link picture was.
But, at least to me, a sideways envelope just was not intuitive to me as the place to subscribe to email notifications. And (because I was told to always end with something nice) I agree with Phil above; the method is really simple and the whole item works great. I take it your design tool helped to give you the exact dimensions for the 3 sections; is that a correct assumption? I have to assume so, since if I had, say, a 400 pixel wide image I would need to know the right settings, etc.
Bob,
That’s great feedback! I added a little note over the image that helps direct folks a little better.
Thanks!
Doug
I tweaked mine in the graphic to clear up the confusion… 😉
William,
It looks like you might have a conflict between your comment class names and the class names in the sidebar graphic. You can name them differently to clear up the conflict. Let me know if you need a hand!
Doug
Everything seems to be working in both FF and IE… I think you might have been on the site while I was trying to tweak a plugin that wasn’t quite working out… 😉
Awesome! I am gonna grab this 🙂 Thanks for sharing. I like that header, mate! I’d like to learn how you did that 🙂
Cheers!
Sweet design Doug, I’ve implemented it on my site 🙂
I’m flattered Alpesh & Tony! Thanks!
Nice approach, but I need something for a topographic map, so I can’t use rectangle areas … I think I have to use the old style imagemap with coordinates, but I probably will dig a little bit deeper …
Thanks for this info, Doug. I had been here before and wondered how you did it. We wanted to created a map like that to insert after our posts, and now that we have the means, we can do it. Bravo!
Where do we “drop the HTML” when working in wordpress. All I have are CSS and php pages.
Hi Doug,
I left a previous comment but realized that I hardly offered any insight into my dilemma at all. We have been adapting a wordpress theme to help us launch our online sitcom here:
http://www.phaylen.com/blog/
Now, you’ll see we have a navigation banner across the top, an image we intended to map as we have dozens of times before. /palmforehad. None of us really unerstand CSS, but we stumble around sufficienntly and thus far have done okay up to this point. Your article in the ONLY ONE out of dozens that provided are real insight on how to utilize imagemapping in CSS easily. I eited the stylesheet according to your directions, but have no idea where to place the HTML. All you said is “Add your html… It’s nice and simple” and then i cringed because I thought.. “not simple enough for me!” I didn’t know i could add html into any of these php pages in the theme editor. Do I place the html in the header? The Main Index template? The Functions? I assume all wordpress users have the option of editing their theme in the dashboard editor, which seems pretty universal in functionality. If you could suggest where to place the html, I’d love to adapt oru code for my navagation bar.
Thanks for sharing your knowledge with the community. I’m happy to get you a coffee.
Hi Phay!
All of the files for your blog’s theme are available through the Admin panel for editing. If you click on Presentation and then Theme Editor, you should be able to see a list of your files on the right and an editor to the left.
If you wish for this to be in your sidebar, you probably have a Sidebar page. Click to edit it and then put the HTML provided within the page where you’d like it.
One note: The stylesheet edit is relative to your page, so you’ll need to upload the picture to the theme images directory if you’re referencing it as you would other images in your theme.
Hope that helps!
Phay,
I came across this site today and had the same dilemma as you. I also wanted to add an image map to the header image. After playing around with it for a while, I got it right. Put the div HTML in the header.php file. I put it between and . Not sure if your template has that exact coding, but play around with it in the header.php file and you’ll figure it out.
–
Paul
Thanks for the fast response!
No, i didn’t want it to be in teh sidebar, it’s at the top of the page (you can see in the link i provided- the pink navigation bar that says contant, about the show ect..)
I have been working in the dashboard all morning, unfortunately, I not sure in which file I place the html, as stated above, i have several, header.php, main index.php, functions.php, footer.php. I’m not sure where to insert the html code. (the first part you provided, I have already inserted the remainder into my stylesheet) I have my image there on the website, everything is ready to go, i just need to know where to add the html portion of the code for adapting.
Thanks so much for your time and fielding questions from a novice.
Phay
… Or maybe someone could post in the comments about which file we place the html portion of the code in. A gentleman a few posts up said he figured it out. I haven’t been so lucky.
Phaylen
It was a great help!!!!, Highly appreciated.. thankssss
I’m having a hell of a time finding a way to embed a clickable image map in wordpress because it strips html map tags. Your way would work but a map of the US is obviously way to complex to screw with this way. I’m lost.
Help.
It seems like flash is my only option?
Dave,
If you put the image in your template, you’ll be fine. If you put the image map in the actual content, you could run into filter issues. The way I’ve worked around this is terrible, but at times I’ve utilized an iframe.
Doug
Hi,
it seems that the image map and the links are two different things, they dont work together like how an image map in html does
when i include background positioning (center left) for the image map, the positioning of the links doesnt follow up.
any way to get around this? im very amateur. thank you.
This is true, Jem. They are two discreet mechanisms.
Would a similar approach be used for a larger and more complicated image map like I am trying to use?
If you view my site, click on links to the left and you’ll see the image I’m trying to use as an image map (under the Text alphabet).
Basically, trying to use the Image to go to each section of this list by letter.
Evidentally, I spent 20 minutes building a map with GIMP, and then WP removes the map tags, so that’s how I found your site.
Though, may contemplate using Flash
Thanks.
Hi Bill,
As long as the regions are rectangular, you can build out hotspots as complicated as you’d like!
Doug
i’m currently using a template layout and editing with my own stuff. I want to add an image map, but i’m not sure where to place it in the css. the image i want to make a map of is in the header part.
hello, i built my website on joomla…i want to use this method to make the logo of my page a link to home, i have been told u can not do this with joomla but this article gives me hope! help via email would be muchly appreciated….thank you
Hi Doug – I’m building out a rather complex css-based image map that also has remote rollovers (in this case, text displays elsewhere on the page when you hover one of the image hotspots). Any way, I came across your example here while researching that… and I thought I’d share the following input:
1. For accessibility, you shouldn’t use visibility:none (or display:none if you considered that) to hide the text here, as an element styled with visibility: hidden will not be read by screen readers (those that follow spec).
Instead, use a more robust image replacement technique. I suggest either the Phark method or Gilder/Levin – those are just the better documented names to google to find the basic techniques. I prefer G/L as it also works with CSS enabled but images are turned off.
2. While I don’t see it breaking (using FF3), your implementation of positioning also has inherent risks. An absolutely positioned element is positioned relative to its closest positioned parent. Basically, you’d want to explicitly set a positioning context by applying ‘position:relative’ to #subscription. Then the children (the positioned links) can be positioned within that parent. This method helps ensure more reliable results across browsers.
Also, you should then use the positioning declarations of “top: x” and “left: x” (where x is the offset value, say in px) rather than margins to handle that positioning. Again, I don’t necessarily see it breaking the way you have it, but top and left are meant for this so why not use them? Plus you’ve got floats and margins set on the same element, which under specific conditions cause the “double margin” bug in IE6 (did you test this there?) – while there is a fix, you avoid that issue entirely by using top and left instead of margins for positioning in this case.
3. Finally, why not use a semantically sound unordered list for these links instead of the meaningless div?
Sorry for droning on… I just like to share, b/c I know from experience how there are many different ways to use CSS to get a desired result, but some ways certainly do work better (more reliable, cross-browser) than others. HTH.
My online image mapping tool now does CSS image maps as well as HTML image maps.
here is the link
online image map tool – html & css
Thanks, Doug! After reviewing several tutorials, I am implementing this on my wife's coupon blog, http://www.SavingWithAmy.com/. This is by far the easiest and most straight forward tutorial to follow and implement that I have come across.
Thank you so much!! Your instructions saved me HOURS of work…I am new to web development, and I just suffered thru my first large project. I made it…the client is happy, ecstatic actually, and so am I!
Hello, thank you so much for posting this! Years later and it’s still helping…nice! I’m struggling to get my image map to link in the right place. I have a banner and I want the social icons in the upper right of the banner to link using the code you’ve supplied. It works great, except I’m doing something wrong because my links are appearing on the far upper left side of the screen, not over the social icons, but over the logo. I’m sure it’s something simple, but I just can’t figure it out. Thought I’d share it here in case you have any insights. Thanks again for posting this!
Hi Tawny!
It’s definitely to do with the positioning of your anchor tag element (<a class). I haven't taken a look myself, but have you checked that?
Doug
Thanks so much for the quick response! I’ll work on it.