Tutorials, Tips, and Resources

for Creating a Better Blog



7-Day Blog Bootcamp Challenge


Shape up your blog in a week! (learn more)



Why Not To Use Image Maps

Why You Shouldn't Use Image MapsToday I wanted to touch on something that should help to better your blog coding knowledge and hopefully distract you from making some common mistakes of using image maps for your navigation menus.

It seems to be pretty common practice, especially with Blogger users, to use image maps in their header navigation. There are so many other proper ways to create a menu that doing things the image map way is just a bit sloppy, in my opinion… Especially when implemented wrong.

So you might be wondering, “what are image maps for then?”.  Image maps are for linking particular areas of an image to a certain source. For example, if you had a photo of a world map and wanted to create invisible bounds around Florida which then linked to a page about Florida, that would be a proper use. With this method, you could use image map coordinates to outline the state of Florida for a precise geographical link.

Why you shouldn’t use image maps in navigation

1. There’s usually no point. You are making unnecessary work for yourself. Straightforward menus simply don’t need to be created this way.  Imagine an image map like this: you are basically creating an invisible floating shape on top of an existing image. That existing image isn’t “attached” to the link as it would be had you just sliced up your image and created an image link.

2. They are trickier and take more time to implement, and if you have no experience with them you have a high chance of implementing them improperly. I can’t count the number of times I’ve visited a blog and not been able to click on their navigation links because they’ve included a poorly coded image map that doesn’t work on every browser.

3. Most of the time, ALT tags are left out, leaving your search engines clueless about the content of your image map. Basically, search engines don’t care about your image map as much as they do a standard link or image link which can affect your SEO (1).

4. They can eat up your page load time. If you have a large base image for your image map combined with lots of coordinate data used to make the links, your page file size can get quite large. (Sure, the same thing can be said for sliced images as well so it’s up to you to decide which would load quicker for your site.)

5. People with disabilities could have a hard time navigating your site. Screen readers sometimes only read ALT tags and the first link, not all of them.

6. They are not ideal for mobile devices. Your iPhone might shift the coordinates rendering a menu unusable on the device.

When you should use image maps

Of course there are instances when you might need to use an image map. The mention about the world map would be a perfect example. Image maps can be a good tool for things like that, where you need to link a specific part of an image (especially if it has awkward edges!).  If it makes sense for you to use one, then don’t be afraid to use one but do make sure you consider the above.

If you do use an image map, make sure you have alternate text or graphic links somewhere on your page as well to link to other pages of your site. Also, make sure you implement them properly and test on all browsers and devices for functionality.

Image map alternatives

Your navigation is not something that should be taken lightly when creating your blog layout. It is probably one of the most important aspects of your site, so care should be taken when you build it. You want it to be easy to use, to work on all browsers, and to benefit your SEO. Text links and list items are always an option and can be styled with a little CSS. Otherwise, slicing up your base image (that you would have used for your image map) and creating individual image links for each link item would be your next best bet.

A while back, I created a video about how to create a header image with navigation links in Blogger. I recommend watching it to get the basic idea of how to cut up your image and put it back together with links included:

 

You can also check out this tutorial on how to create image links to learn the HTML involved in the process.

Happy creating!


  • desmarsol

    Thanks for this great video Dana. I was going to use an image map to create a header that included navigation links but will now go this route instead. I do have experience with Photoshop but have to say even if I didn’t I think this is really very clear. The only thing that is a bit hard to see is where you are adding the links into the HTML window because it’s so small. To be able to see the code a bit better would be awesome, but I will watch the video until I get it right. Thank you VERY much!

  • I am trying to use this for a landing page, but I have borders around all the images despite what I’ve done elsewhere in CSS, help!

    • You could fix this two ways.

      1. add “border=”0” to the end of all of your HTML image codes.
      2. in CSS add: img {border:0}
      or: a img {border:0}

  • Try adding this to CSS instead:
    img {vertical-align:top}

  • Ok so I am having a hard time with the codes. I can’t on the tutorial as to what your putting to start your code and to close it out.

  • I am so grateful to bumped into your tutorial. I have been learning how
    to work on CSS codes too but here is my problem, the tabs I created
    don’t align with the main header. Here is the page:
    http://raveandview.blogspot.com/. Thank you for your help in advance.

  • Dharmesh Hadiyal

    It’s good
    If need some more info then check video:
    https://www.youtube.com/watch?v=78KInSrsLI4

Navigate