John Fremlin's blog: HTML image maps don't scale

On a webpage you can mark part of an image as clickable by including a <map> element specifying the clickable region. In a fine example however of how poorly thought out and badly specified the web standards are, this clickable region is specified in pixels and if the image is resized (zoomed to make it fit so that one screen pixel is not one image pixel) the area will not be adjusted to compensate.

How to work around the idiotic oversight? Well in JavaScript with JQuery, if you get hold of the height and the original height of the image (assuming an aspect preserving transformation), this will do it:

	$('area').each(function() {
		orig_coords = $(this).attr('orig-coords');
		if (!orig_coords) {
			orig_coords = $(this).attr('coords');
			$(this).attr('orig-coords', orig_coords);
		}
		scale = height / orig_height;
		$(this).attr('coords', orig_coords.split(',').map(function(x) {
			return Math.round(x * scale)
		}).join(','));
	});