When Old-Skool is Useful – Image Mapping

Author: James Braithwaite

Several of the sites we have built and maintain have Flash maps embedded within them, and occasionally these maps need updating. The Willowbrook Shopping Centre map in particular is frequently updated as businesses join or leave the centre. The trouble is, opening an old Flash file and spending half an hour remembering how to edit the thing is not the most efficient way of updating something as small a link or removing a store from the map.

With this in mind and an update due to the website I decided it was time to recreate the Flash map in HTML and CSS. Of course, armed with HTML5 and CSS3 this would be quite a pain free task, but supporting IE6 and 7, I was not so fortunate. The main bulk of the map was easy enough to build up as the elements were square and easily placed using absolute position, but a section of diagonally placed elements, and some strange corner shapes meant that I couldn’t set anchors without overlapping other links.

Desperate to not have to resort to Dreamweaver’s useless image mapping tool, I found a really useful (albeit ugly) website for image mapping, image-maps.com. While this website is totally stripped back in terms of design, it does exactly what it says it does; maps links to images. And it does it well, and really easily. Just upload your image, plot the points by clicking on the image, and save out the code.

This solution saved me a shedload of time trying to manually plot the image maps, and also meant that I could create a tidy pure HTML and CSS interactive map that is fully functional on the dreaded Internet Explorer browsers!

The moral of the story is, sometimes the old tricks are still a perfectly valid way of solving a problem. If it wasn’t for the dated image mapping method I wouldn’t have been able to fix this problem. Oh also, don’t judge a book by its cover. Really ugly website, but saved my skin!