Are HTML Image Maps still used?

Question

Do people still use the old HTML Image Maps? The ones with:

<map name="test" id="test">
<area shape="poly" alt="" title="" coords=...

Or is there a newer, better alternative?

Pilarpilaster

When you ask if there's something better or not, you should give a means for comparison. Better in what way, or for what purpose? There are more powerful tools than image maps at our disposal, more complex too ... – Chamber

Good point - I haven't used an image map for a long time and thought it may have been superseded by an improved method of coding. – Pilarpilaster

Javascript/layer based functionality, and flash have replaced image maps in just about everything I come across ... I can't remember the last time I saw one in active duty. If you have a specific purpose in mind though, a more specific answer might be more readily available :) – Chamber

There's an older alternative (I'm not saying it's better, but it works) It's called flash. It's not necessarily as accessible as HTML, but it does the job. – Mercedes

I see... Just creating a map of some English counties that when clicked go to their relevant page; need to add some rollovers. Very simple stuff and a short timeframe. – Pilarpilaster

I'd rather avoid Flash in this day and age lol. – Pilarpilaster

If you're looking for something quick to do, fast to run, and only mildly evil, image maps will do the job. There's no widely supported replacement which will do the job at the same speed to my mind. Now if you had time for SVG, Canvas, and didn't mind excluding IE from your supported browser list ... – Chamber

@Mercedes saying to use "Flash" might be considered a bit broad considering the scope of what can be done with it. Do you care to link to documentation for a specific feature that would allow someone to implement image map functionality in Flash? – Mirk

@NormanH, I wrote that comment over two years ago, and it was intended as a comment, not an answer. I don't know of any documentation for how to do image maps in flash, because it's such a trivial thing to implement. Throw an image on the stage; draw a few shapes over it; attach click events to the shapes; done. That said, <map> is still valid in HTML5. – Mercedes

Not using flash seems like it was the right choice comparing to today's standards with flash obsolete. – Dottiedottle

Answer 1

Yes, people do still use image maps. An alternative would be to position elements using absolute positioning and CSS but that's not necessarily better. It also doesn't allow you to have shapes like in image maps

Ceremony

Ok, so html image maps are still good? How about adding hover/rollover effects? – Pilarpilaster

my major issue with image maps is that unlike the images they associate with they do not scale to browser or screen size. I would hope the OP researches SVG formats – Roentgenoscope

you have to scale it with the size of the image. Making your image size relative to the size of window. then always comparing that width/height ratio to the image map ratio, and then using javascript to overwrite the coordinates. The jquery based image size event handler is $(window).resize(function() { ....yourcode... }); – Freemon

Answer 2

They are in the HTML5 specification, so they will not get deprecated.

You can still freely use them, they certainly still have their place in web development. Or I could say, those rare occasions exist where you can best solve something with an image map.

Eben

Answer 3

An alternative solution to using CSS or image maps would be to make use of SVG graphics embedded into the HTML dom.

One tutorial on how to achieve mouseover effects using this technique is described in this tutorial: http://www.petercollingridge.co.uk/data-visualisation/mouseover-effects-svgs

The key takeaway being that SVG elements also trigger traditional dom events including onmouseover and onmouseout.

Mirk

+1 SVG is the best direct alternative to imagemaps, as interaction can be with any arbitrary shape. Something very similar to imagemaps can be created where vector co-ordinates chop up raster pixel images, by giving SVG elements an image fill. But even then, area maps may be better in some cases (they're simpler, and don't crop the image, which might be desirable sometimes). – Juju

Answer 4

Yes html image maps are good especially if you want your area to be a polygon. You can add rollover effects to you map as well with javascript. There is a nice tutorial and demo here:

http://www.tutorialized.com/view/tutorial/Image-Map-Rollover/3484

Educationist

+1 -- While you can do a lot with CSS and absolute positioning, image maps are still the only way to detect hover on a non-rectangular polygon area. – Nonetheless

Answer 5

Yes, I still use image maps, however my last project used Raphaël. It was pretty easy to get something up and running.

http://dmitrybaranovskiy.github.io/raphael/

From their web site:

Raphaël ['ræfeɪəl] uses the SVG W3C Recommendation and VML as a base for creating graphics. This means every graphical object you create is also a DOM object, so you can attach JavaScript event handlers or modify them later. Raphaël’s goal is to provide an adapter that will make drawing vector art compatible cross-browser and easy.

Nice simple image map example:

http://dmitrybaranovskiy.github.io/raphael/australia.html

Nananne

It wouldn't have taken much for you to fix the link yourself instead of moaning and downvoting :( – Nananne

Dear David, I removed the downvote. How do you want me to fix the link which is just simply broken? I would remove the http://raphaeljs.com/ completely and only provide the Github example. – Anastasius

The point of stack-sites is collaboration. If you see a broken link then fix it if you can. Don't think of it in terms of broken links, they are broken pointers to resources. If the resource has moved, then update the link so it points to the new location of the resource: that's the important thing. Raphaeljs used to have it's own site but it has obviously moved to GitHub. Do we send people back to Google to find where it lives now? Or do we help them go from here? The Australia example is the same example it just lives somewhere different. – Nananne

The http://raphaeljs.com/ link will eventually break when the domain registration expires but there is a re-direct on it now to give everyone (in the world) a chance to update their links. Perhaps @Anastasius you could start with the one in the article and add to the collaborative effort here at SO. – Nananne

Understood, thank you David! I updated the reply and fixed the link. :-) – Anastasius

I think this one is not responsive. Even in the demos there´s no meta viewport declared. – Rimester

Answer 6

Image Maps are still in HTML5 specifications, supported by all browsers.

They can be adapted to responsive design using jQuery RWD Image Maps: https://github.com/stowball/jQuery-rwdImageMaps

It detects and automatically resize the image maps coordinates.

It's also available for Wordpress developers as plugin: http://wordpress.org/plugins/responsive-image-maps/

Simple and effective solution.

Shopwindow

Answer 7

While I rarely see them used on modern websites anymore, they do seem to be used by my clients in their email campaigns. However, I've noticed, and confirmed that there are some scaling issues with the coordinate system on mobile devices.

** I know this thread is old, I was just doing some additional research into this for a recent email campaign issue and thought it may help someone else down the line.

3rd party edit

The question on litmus.com on image map support is from 04/2014

Image maps do not support ALT tags, when images aren't loaded the ALT text isn't displayed in some clients.

Image map usage generally results in using large images which can cause deliverability issues and hinder download speed (especially important to mobile users).

And most importantly, The iOS (iphone/ipad) doesn't scale the image map link coordinates when the image is scaled which breaks the links. Since iOS represents a large majority of email opens (iPhone + iPad = 38% via http://emailclientmarketshare.com/) this is important.

Mcdaniels

Answer 8

Yes, it still used

An image map allows a user to hyperlink to many pages by clicking different parts of an image.Simply by using image map we create lists of coordinates relating to a specific area of the same image and give the hyperlink to a different location. By using this within a single image we give multiple links.

More

Abbieabbot

Answer 9

image map is quite interesting option in html and html5 they are still being use and i personally love it i therefore find issuse in mobile devices my issue is relatd to scaling

yes i have experience it my self however i am a student enrolled in html html5 and for begineers i would like to follow w3chools link

http://www.w3schools.com/html/html_images.asp

you will gain alot from this [page

Willwilla