Occasional posts on subjects including field recording, London history and literature, other websites worth looking at, articles in the press, and news of sound-related events.

04 September 2011

Making soundmaps with iframes and image maps

THE NEW SOUNDMAP for London's waterways is now online and it's the second site section to use a combination of iframes and image maps.

Here's a screen-grab of its northwest corner:

London waterways soundmap

An earlier post looked at two easy ways to make a sound map using Google and Bing maps. But a sound map doesn't need to have anything to do with geography. Distances between clickable areas or hotspots could represent measures of time, relatedness, similarity, and much else.

You might also want the freedom simply to draw a map the way you want. The more alternatives you devise in place of convenient third-party elements such as Google Maps, the more your website carries the imprint of your own thoughts and tastes.


An image map consists of a picture, which can be in JPG, GIF or PNG format, and lines of HTML code to define the exact size and location of each hotspot. The code also specifies the URL of the webpage each hotspot is linked to. Clicking on a hotspot makes the browser open the webpage and the instruction target determines how this is done.

If the new webpage contains an audio player to go with a particular hotspot, then it's a good idea to make it appear within the existing soundmap page. This can be done by including an inline frame or iframe as the hotspot's target. An iframe is easy to set up as this W3Schools tutorial shows. But with image maps there's time and tedium involved in working out the pixel-perfect co-ordinates for all your map's hotspots.


There are several graphics programs which allow you to make image maps by importing the picture, selecting areas on it to turn into hotspots, and then typing the URLs and other details into dialogue boxes. They then work out the co-ordinates and produce finished code ready to paste into your webpage. Examples include the fairly expensive Adobe Fireworks and, at a more affordable £69, Xara Photo & Graphic Designer. Xara has an awkward interface compared to Fireworks, but it's still a versatile choice for the money.'s MapEdit has been around since 1994 and its makers claim modestly that "there is no easier way to make an imagemap". MapEdit certainly is straightforward if you exclude the option to add Javascript mouseover functions to your hotspots, of which more later. The program has a 30-day evaluation period and costs $15 to register.

The last option considered here won't cost you anything. It's the open-source GIMP or GNU Image Manipulation Program. Its imagemap-building plugin can be found under Filters > Web. Once you've drawn all the hotspots and typed in their details you can cut and paste the code from View > Source.


A drawback of image maps is that when a site visitor moves their cursor over a hotspot, not much happens until they click on it. By default, the cursor will change from an arrow into a hand, and any alt text will appear after a slight delay, but the effect is underwhelming. Wouldn't it be better to have a rollover effect where the part of the map covered by the hotspot changes colour?

Many tutorials and examples exist online where people have attemped to do that using Javascript. But all the ones I've looked at seem potentially very time-consuming to use for a soundmap that might end up with dozens of hotspots. Xara Photo & Graphic Designer makes a good go of automating the task, but you'll still have to draw and position all the hotspot rollover states, each in their own layer.

To avoid all this extra work, a different approach was used for the London Map section. When you move the cursor over one of the orange rectangles, a little bubble appears above it containing some descriptive text. Such an approach is redundant for the Waterways soundmap, where there's already something to read at each hotspot's position, but it seems to work well enough on the London Map.

The effect was made possible with Craig Thompson's jQuery-based qTip tooltip plugin. qTip is fairly simple to set up and with experimentation you'll get better results than the examples on the image map demo page. Craig is an altruist who provides qTip free of charge but he wouldn't say no to a small donation if you find it useful.

comments powered by Disqus