Image maps and HTML5

Question

This question is more philosophical than technical.

I've trained myself as a web developer back when web developers were called webmasters and my tool of choice was FrontPage, moving onto Evrsoft 1st Page 2000.

That was the last time I used an HTML image map.

Now it's HTML5, AJAX, vector canvasses, CSS 3D, jQuery, local storage, touchscreen Safari, you name it. The image map has faded into an obscurity where not even Google comes up with too many relevant results; a mandatory W3C Schools entry and some forum posts from 2004.

Obviously creating a website navigation or similar triviality using an image map was a bad idea back then and it certainly is inexcusable today.

But right now I have a task to create a polygon clickable area on top of a div with a background image.

I'd have no issue doing this in image map since it seems like it was designed for a use case exactly like this, and while I've done no tests, I couldn't imagine any browser dropping support for an element that worked beautifully for years. But I can't help but think that there must be a better way to do this today.

My web creation philosophy is to develop for IE5.5, and then design for Chrome edge. This means that the site first needs to work on a basic level on even the most antiquated browser, and then start adding JS & CSS to make it more beautiful, more usable, faster, simpler, friendlier and better.

As such, while I know I could do a canvas in Raphaël and add all kinds of snazzy hover effects and things, I think making functionality as simple as this shouldn't require a 89 kb (or X kb) JS library. Or even JS at all.

I don't know if CSS3 has capabilities to define polygonal areas, but while recognizing the great possibilities introduced by CSS3, I prefer keeping anything defined there as non-essential flair that would degrade gracefully.

So in today's webdev world, what would be the most cross-browser way to define a polygonal click area (preferably in a way that's grabbable by a jQuery .hover(), or at least a CSS :hover), that isn't dependent on JavaScript or CSS attributes available in a minority of browsers? Is image map really the only way to do it? What of mobile devices?

Fading

... starting with IE5.5 is pretty crazy. Really you are just hurting yourself. I have a fairly high traffic site (roughly .5 million visitors per month) and in the past 3 years I have not had a single visit with anything lower than IE6. In the past year IE6 has made up for roughly 2% of my user base. – Arietta

It's not that I target users using IE5.5, nor do I intend my websites to look beautiful on it. I don't even have a copy of IE5.5 to check what my websites look like on it. However, I use this mindset when building so that I can guarantee my websites working on even the most primitive browser, regardless of age (Lynx, Kindle, browsers of the WAP/Nokia Navigator era, screen readers, etc.). It helps keep content and structure as one, and snazz and flair as another. – Fading

There's no accounting for philosophy - but designing for a least common denominator of no javascript limits your architecture to an incredibly primitive model. No ajax. All data submitted through HTTP posts? No client logic validation/logic/interactivity? Ouch. Unless you want all your users to have a 1990's-era web experience, you're basically talking about designing two completely different implementations of a web site. You can't "progressively degrade" an ajax client/server model; you you'd be making two versions of the site. It's just way too much extra work for no payoff. Who uses lynx? – Peckham

As I said, IE5.5 isn't my target and I don't test for it, but it's what I build the backbone of the site for until I start thinking about prettying it up and adding JS flair to it. Submitting via AJAX is beautiful, but can JS really be a requirement for a functionality as core as form submission? As in, your browser and device must be JS compatible and enabled, or every form on my site doesn't function at all? And certainly JS validation doesn't mean server side validation (another IE5.5-esque approach) can be ignored. – Fading

I'm not of course saying that users with JS enabled and users with JS disabled should have the exact same user experience. Or even close to it. I'm just saying, to me it seems a very silly attitude not to make your forms submittable the normal old-fashioned way. By all means, add the AJAX submission on top to make the user experience better (I do). But there's just no discernible reason to my eyes why I should specifically make the forms unsubmittable via HTTP in favor of AJAX. – Fading

"can JS really be a requirement for a functionality as core as form submission" Why can't it? I ask again: who uses lynx? In what year will you decide that a baseline of technology designed after 1991 is required? 2015? 2020? Do you restrict yourself the the first HTML spec? Then why restrict yourself to other aspects of the tech from that era? – Peckham

.. what I have against submitting forms the old fashioned way is that it requires a complete screen refresh afterwards, wasting huge amounts of bandwidth, and creating a slow, unresponsive user experience. It's night and day. It changed the web. So if I want to design a web site that is both modern, and works without javascript, I'm going to have to create two totally different versions of the same site. I've never found anyone willing to pay to do everything twice so they can support someone who may not even exist. It's also very, very difficult to design complex/multipart forms the old way. – Peckham

Answer 1

Why is using image maps for navigation inexcusable? It's a tool like any other; it has a time and place. Using imagemaps with javascript enhancements is backward compatible, degrades gracefully, and has 100% browser support. They don't need a plugin like flash.They've been supported practically since the dawn of the web browser. Just because something's old doesn't mean it isn't useful; quite the opposite, it means it's well supported.

I wrote a jquery plugin called ImageMapster to add effects to imagemaps so you could create interactive images without using flash. It would be easy to implement a tool that had the same functonality without Javascript support by replacing with a list in those cases. Personally, I think trying to write for the web without javascript is like trying to drive a car without tires. 99% of the web doesn't work without it any more. This isn't 1995. But if you really are concerned, the nice thing about imagemaps is the basic navigation functionality still works. There's no way to accomplish that just with CSS -- not even CSS3 if you have irregular shaped areas.

Peckham

+1 for "old != not useful". <map> is still a part of the HTML5 specification, so "old" can't even be used in the context of "outdated". Note on your website: Adding a spinner (or any indication that a page is loading) will improve the user experience. "In the wild": Mention that the demo is located under the "Residences" link. I initially thought that the link was broken, because the screenshot did not match the landing page. – Malynda

Thanks for the feedback! Yeah the demo page can take a long time to load esp. on mobile devices. I should optimize it &/or do as you say. I really need to do a total overhaul of that site & clean up the docs... just not enough hours in the day! On the "in the wild" link I do say that already :) – Peckham

.. actually I just realized I do have a spinner for page loading on in-site navigation- i suspect it's just so faint you didn't see it; seems like quick opacity fix would help. – Peckham