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

Posted 2012-08-15 13:37:00 GMT

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(',')); });

tpd2 is still developing?

Posted 2012-08-18 08:44:27 GMT by Anonymous from

Yes, we need to know more about tpd2. Whatever happened to tpd1

Posted 2013-01-10 08:11:45 GMT by Anonymous from

Post a comment