How To: Build An Image Map with CSS

You may have noticed that I recently added a nice graphic to my sidebar for my RSS feed, email subscriptions, and mobile feed. I wanted something ‘geeky’ so I decided on a ‘pocket’ graphic that holds all the subscription methods for my blog.

In the days of Web 1.0, a collection of links like this could be built by splicing up your image up 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 makes this a ton easier… no splicing images and no trying to find a tool to build your coordinate system!

Build your image that you’d like to use. You can utilize this graphic below… I’ve got the working version up on the sidebar, this is simply displaying the graphic (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. 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!

This “How To” post is for entry into the Geeks are Sexy ultimate “How To” Contest! One note, it is true that an image map can have much more complex polygons, but I haven’t really seen too many places where that’s a must have. I did notice that big ol’ RSS image on the Geeks are Sexy sidebar… that’s a good place for a link.

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

Sponsor: If you’re a newbie to web design, then Build Your Own Web Site The Right Way Using HTML & CSS, 2nd Edition is a must-have. In this easy-to-follow guide you’ll learn how to build a web site the best way possible – by doing it yourself!

About Douglas Karr

Douglas Karr is the founder of The Marketing Technology Blog. Doug is President and CEO of DK New Media, an online marketing company specializing in inbound marketing leveraging social media, blogging, search engine optimization, pay per click and public relations. Their clients include Webtrends, ChaCha and many more. Douglas is also the author of Corporate Blogging for Dummies.

View all posts by Douglas Karr →

http://www.unintentionallyblank.co.uk Phil

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.

http://marketingtechblog.com Douglas Karr

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.

http://www.unintentionallyblank.co.uk Phil

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.

http://marketingtechblog.com Douglas Karr

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.

http://marketingtechblog.com Douglas Karr

Updated with some accessibility goodness re: Phil’s concerns.

http://www.unintentionallyblank.co.uk Phil

Nice one Doug!

Sorry to be picky, I just get overly passionate about silly things like this

http://marketingtechblog.com Douglas Karr

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!

http://www.tully.ca/blog/ William Tully

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!

http://marketingtechblog.com Douglas Karr

Too cool! Looks great up there William. It’s the ultimate compliment when someone utilizes one of my posts. Thanks!

Bob Razumich

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.

http://marketingtechblog.com Douglas Karr

Bob,

That’s great feedback! I added a little note over the image that helps direct folks a little better.

Thanks!
Doug

http://www.tully.ca/blog/ William Tully

I tweaked mine in the graphic to clear up the confusion…

http://marketingtechblog.com Douglas Karr

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

http://www.tully.ca/blog/ William Tully

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…
http://justsharepoint.com Alpesh Nakar

Awesome! I am gonna grab this Thanks for sharing. I like that header, mate! I’d like to learn how you did that

Cheers!
http://geekwhat.com Tony Chung

Sweet design Doug, I’ve implemented it on my site
http://marketingtechblog.com Douglas Karr

I’m flattered Alpesh & Tony! Thanks!
Pingback: [GAS] “How to” Contest - Full Submission List | [Geeks Are Sexy] Technology News
http://www.alle-architekten.de Der Architekt

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 …
http://bloggingforhumanity.org/ Blogging For Humanity

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!
Pingback: 2007 Statistics: The Marketing Technology Blog | The Marketing Technology Blog
phay

Where do we “drop the HTML” when working in wordpress. All I have are CSS and php pages.
phay

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.

http://marketingtechblog.com Douglas Karr

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!
http://www.amipow.com Paul

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

phay

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
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
http://www.pixelslive.in Bobin

It was a great help!!!!, Highly appreciated.. thankssss
http://www.solarpowerrocks.com Dave

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?

http://marketingtechblog.com Douglas Karr

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

Pingback: Add a Twitter Icon to your Blog | The Marketing Technology Blog
Jem

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.

http://marketingtechblog.com Douglas Karr

This is true, Jem. They are two discreet mechanisms.

http://www.astropope.com Bill

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.

http://marketingtechblog.com Douglas Karr

Hi Bill,

As long as the regions are rectangular, you can build out hotspots as complicated as you’d like!

Doug

tess malloy

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.
http://surfalogo.com Clayton

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
Pingback: DivageekDesigns.com » Blog Archive » How to Add Social Networking Icons to your Blog
http://luispunchy.com David G

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.
http://www.image-maps.com mgwalk

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
http://www.savingwithamy.com/ Max

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.
Cris Foreman

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!