John Fremlin's blog: HTML image maps don't scale
source link: http://john.freml.in/html-imagemaps-dont-scale
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
John Fremlin's blog: HTML image maps don't scale
Waiting for updates: connected
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 112.2.255.124
Yes, we need to know more about tpd2. Whatever happened to tpd1
Posted 2013-01-10 08:11:45 GMT by Anonymous from 92.40.253.149
Post a comment
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK