Adding Links Inside of Images: Image Maps vs. CSS Alternatives

/, Tutorials/Adding Links Inside of Images: Image Maps vs. CSS Alternatives

Adding Links Inside of Images: Image Maps vs. CSS Alternatives

The question came up today about whether to use Image Maps or other alternatives to add links inside of images.  I did a little research on the subject, and thought it would be handy to share what I found along with my own thoughts.

A Quick Q&A Summary

  • Should I use image maps?  Yes!… when it makes sense to.
  • When should I use image maps?
    • When your images won’t change size
    • When your link needs to be a complex shape, and not just a box
    • When you’re dealing with raster images like jpg photographs
  • When should I NOT image maps?
    • When your image is responsive and changes size
    • When you’re dividing the image into parts: slice it, and use image links
    • When you want special styling or behavior
    • When you’re starting with a vector image, and can implement it as SVG
  • What should I remember when using image maps?
    • Always add descriptive alt tags to your area tags
    • Add Title attributes to area tags to provide tooltips to users
    • Include text links somewhere on the page corresponding to the image map links
    • Order the areas from left to right, and top to bottom for screen readers, and tabbing

Some Discussion

Image maps have been around since the dawn of time (which in this case means 1997 with HTML 3.2), so people sometimes dismiss them as arcane.  However, they’re still fully supported in HTML5, and shouldn’t be dismissed out of hand.

Having said that, there are certainly some things they can’t do, and should be implemented thoughtfully to be accessible to visitors using screen readers.  Of course you know Google’s going to have something to say about it, so you’ll want to implement them properly to bump up your SEO.

Resources

Here are some of the articles and resources I found.

SEO

Accessibility

Image Map Alternatives

Tools

 

By |2018-09-25T07:07:34+00:00June 13th, 2015|Categories: Advice and Opinions, Tutorials|Tags: , , |0 Comments

About the Author:

Patrick is the Principal at Golden Path Solutions, a WordPress development business where he works with teams to create awesome themes and plugins, improve websites, and solve problems. After graduating with his masters in Computer Science, he headed the IT department for a business specializing in geospatial technology for agriculture. He later transitioned to a project management position at a major agrochemical retailer where he earned his Project Management Professional certification. At the start of 2013, Patrick relocated to the Pacific Northwest and founded Golden Path Solutions where he continues to pursue his passion: improving people’s lives by making super cool software for the web.

Leave a Reply

This website uses cookies and third party services. Ok