How To Build An Image Map with CSS

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 (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.

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. 😉

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!

41 Comments

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.

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.

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.

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!

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.

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.

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

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.

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.

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.

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.

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!

Search

Your Cart

Our Latest Podcasts

In this MarTech Interview, we speak to Christopher Day, Co-Founder and CEO of DemandJump. DemandJump’s Customer Acquisition Platform shows marketers exactly where to focus to drive revenue. Before DemandJump, marketers could only see the last touch point that led their audience to them. Now, marketers can reach their audience three steps before customers reach them…

Mark W. Schaefer is a globally-recognized educator, speaker, business consultant, and author. His well-known blog {grow} (https://www.businessesgrow.com/), is one of the most acclaimed marketing blogs of the world. Mark has worked in global sales, PR, and marketing positions for nearly 30 years and now provides consulting services as Executive Director of U.S.-based Schaefer Marketing Solutions.…

Your WordPress site is getting a ton of engagement from people all over the world... or is it? While WordPress sites are seeing a decline in engagement while the conversations moved to social media, what's left may be engagement that actually does harm to your site. Commonly referred to as comment spam and trackback spam,…

In this MarTech Interview, we speak to Mike Prasad. Mike has diverse experience as a technology entrepreneur, investor, and strategist with expertise in marketing, branding, UI/UX, product development, cross-market finance, and platform creation. Mike focuses on applying new technologies and initiatives, from macro-level strategy to hands-on execution. Mike developed the brand for Kogi BBQ (http://kogibbq.com),…

In this MarTech Interview, we speak to Melinda McLaughlin, Chief Marketing Officer at Extreme Reach. Melinda is a superstar in the industry - recently recognized by the Stevie Awards for Women in Business, with the gold for Female Executive of the Year. Melinda is responsible for spearheading all aspects of the company’s global marketing and…

In this MarTech Interview, we speak to Paul Mealy, author of Virtual & Augmented Reality For Dummies an easy-to-understand primer on Virtual Reality and Augmented Reality. Virtual Reality (VR) and Augmented Reality (AR) are driving the next technological revolution. If you want to get in on the action, Paul's book will help you understand what…

In this MarTech Interview, I interview Kerry Bianchi, the CEO of Visto. Kerry is the leader in the programmatic industry, a board member of IAB, a Top 50 Women in Brand Marketing, and 2017 Silver Stevie Award winner for “Female Executive of the Year, Business Services – Computer Services and Software. Kerry is the CEO…

Dana Hamerschlag is a Harvard Business grad and leader in the sales technology industry who leads product innovation at sales consulting firm Miller Heiman Group. Dana explains, despite the hype, most organizations aren’t doing much with AI, but rather analytics. Why that is? People haven’t invested in the right data sets to use AI engines…

An IP address is a way to connect businesses and marketers to their customers and prospects with a new approach to online advertising: IP Targeting. El Toro matches physical addresses to IP addresses with extreme precision using offline data and patented one-to-one marketing technology. Marty Meyer of El Toro drove up from Louisville and joined…

Brent Oakley operated a chain of successful premium car washes but struggled to find a means of marketing to his customers while they were in-store. He built an innovative music and messaging platform that provides real-time, highly-targeted messaging to each store and launched it as a Saas platform, Vibenomics. Vibenomics provides businesses access to a…