;(function($) {
$.fn.rwdImageMaps = function() {
var $img = this;
var rwdImageMap = function() {
$img.each(function() {
if (typeof($(this).attr('usemap')) == 'undefined')
return;
var that = this,
$that = $(that);
// Since WebKit doesn't know the height until after the image has loaded, perform everything in an onload copy
$('<img />').load(function() {
var attrW = 'width',
attrH = 'height',
w = $that.attr(attrW),
h = $that.attr(attrH);
if (!w || !h) {
var temp = new Image();
temp.src = $that.attr('src');
if (!w)
w = parseInt(temp.width);
if (!h)
h = parseInt(temp.height);
}
var wPercent = parseInt(parseInt($that.width())/100),
hPercent = parseInt(parseInt($that.height())/100),
map = $that.attr('usemap').replace('#', ''),
c = 'coords';
$('map[name="' + map + '"]').find('area').each(function() {
var $this = $(this);
if (!$this.data(c))
$this.data(c, $this.attr(c));
var coords = $this.data(c).split(','),
coordsPercent = new Array(coords.length);
for (var i = 0; i < coordsPercent.length; ++i) {
if (i % 2 === 0) {
coord = parseInt(coords[i]);
w = parseInt(w);
coordsPercent[i] = ((coord/w)*100)*wPercent;
}else{
coord = parseInt(coords[i]);
h = parseInt(h);
coordsPercent[i] = ((coord/h)*100)*hPercent;
}
}
$this.attr(c, coordsPercent.toString());
});
}).attr('src', $that.attr('src'));
});
};
$(window).resize(rwdImageMap).trigger('resize');
return this;
};
})(jQuery);mattstow.com/experiment/responsive-image-maps/jque...
копируй и подключай этот скрипт помле подключения jquery
$(document).ready(function(e) { $('img[usemap]').rwdImageMaps(); $('area').on('click', function() { alert($(this).attr('alt') + ' clicked'); }); });
Этот скриптик добавь после подключенного первого скрипта.