I got a question a few days ago asking why people don't use image maps very much any more. And as I thought about it, I realized that he's right - image maps just aren't seen on Web pages much like they used to be. A few years ago, image maps were all the rage. You saw them on nearly every Web site. I knew one Web developer who
always mapped his images - even if the map only pointed to one location. But now you hardly ever see them. Do you
regularly use image maps?, or do you
find them annoying? Whether you use image maps or not, I'm curious why. Why do you use them or why don't you?
I don't use image maps, mostly because I can't be bothered. It's faster for me to build the same thing with individual images and links. The only time I used an image map was when I was building a site about California wilderness areas. There was a map of California, and the various wilderness areas were linked to their specific pages of information.
Do you use image maps?
Vote Now
View Results
I used to have an image map showing local tennis courts, but now I use forty or so Google and Live.com maps instead, which are much easier to prepare and show more.
I used to use image maps occasionally, but now I use CSS to improve the accessability and search engine performance.
Create a Div with your image as the background. Inside that div create a list of your links. Then use CSS to hide the actual text (Don’t SPAM the search engines with this) and make each element the required size and position.
The only drawback with this technique compared to image maps is that you can’t create complex shapes.
Anyway, I hope someone finds this useful of interesting.
Cheers
Keith
I had to use an image map for a list of sponsors’ logos on a company site once before, but it’s just a pain to keep updating a growing .png file to maintain the layers, then save as a .jpg or .gif. When the height of the overall image changes because of additions to the file, all of the coordinates change and have to be updated. This was something that was already in place before I started, and they wouldn’t approve rolling out my suggested changes. It was just sloppy, that’s all. Not only that, but I know that image maps are xHTML compliant, but something still doesn’t seem right about them.
I guess I should also include the following based on my previous comments:
If the “overall” images changes, everything has to change and it’s a maintenance nightmare. Especially if you’re the only developer for that company/venture; that is, the aforementioned successful business is generating a significant revenue; thus, overwhelmed with the business input and evolution. Potentially, a “Death March”.
…and, (said scenario) you’re only way to corporate salvation is an image map as well as the lead and/or only developer.
I agree with you if you are using a map or something like that to give directions to your physical company’s location to some extent, but I don’t think there is anything wrong with using an integrated API as Luther stated before.
I still have trouble seeing how an image map will save the company in troubled times. I also think, ultimately, that it’s better to break up the images and lay them out using CSS using restrictions on width vs. height.
If you have something that is more complicated….. USE an API!
Keith,
You have a very interesting concept for accessibility, I think I’m going to test it. That’s very interesting.
…Once again, Thank you Jennifer, for the awesome discussion!
Thanks Jason,
I try to use CSS image replacement wherever possible and check each page using the developer toolbar (either IE or FF)to switch off CSS.
This enables me to see exactly how the raw HTML works, giving me the benefit of good accessibility and a good handle on how the output structure works for search engines.
I think that an article about css image replacement would be a great article for Jennifer to write…
)
Cheers
Keith
I used image mapping for a website, cause that was the simplest way to make the mini-map clickable by regions: http://www.duel-films.com/distributeurs.php (a little bug in Firefox when there is no distributors in a region for the moments, I’ll fix it
)
I won’t recommend image map. Break your image in pieces and use CSS or tables and add a link on each images instead. Code and design will be easier to manage in a future update of the page too.
I think I used it in the past cause that was “cool” and CSS was in dark ages.
(4) Jason Champion suggests using API, what is an API?
I like using image mapping, I find it very precise ex. http://www.arkitekturguide.dk/belig.html and its easy to apply.
I guess I don’t know any other way to do something so precise with maps/images such as this http://www.millersaukprairie.com/salesreps.html I would need to learn to do this in CSS or a different method I guess.
Jen
Jen: as with everything else in Web design – you should do what works best for your site. I agree completely that image maps are often the only (or easiest) way to get precision links on an image. And the good news is, you don’t have to switch to CSS to be standards compliant.
When I wrote this article, I was more thinking of people who used to abound who would create a rectangular navigation bar, and then load it as an image map. There are lots of better ways to do that! But for your sales rep map, an image map is the perfect solution. And you did a nice job with it too!
We use will use image maps on our candlestick charts for commodities trading at http://www.timeandtiming.com — they’re very useful for letting users click through for more detail and for displaying the high low numbers using the title tag. It’s all generated using PHP when the image itself is generated. We designed the prototype using Dreamweaver — a no-brainer. Image maps are also useful on sites for little kids.