Какизменять изображение в процентах (уменьшение в зависимости от размера окна), но таким образом, чтобы точки (map area) не сползали с заданных мест?

Question

[Денис Приходько]

День добрый. Подскажите пожалуйста способ изменять изображение в процентах (уменьшение в зависимости от размера окна), но таким образом, чтобы точки (map area) не сползали с заданных мест.
Если указать размер только для изображения, то изображение изменяется, а вот точки остаются на старых местах.
Спасибо.

Answer 1

[Данил Нестеров]

mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html

Comments

[Денис Приходько]

Все заработало. Была несовместимость ява библиотек.

Answer 2

[Алексей Гребеников]

для изображения style="width:100%;height:auto"
Или можешь здесь глянуть jsfiddle.net/jamietre/jQG48/

Answer 3

[Данил Нестеров]

mattstow.com/experiment/responsive-image-maps/jque...

копируй и подключай этот скрипт помле подключения jquery

$(document).ready(function(e) {
	$('img[usemap]').rwdImageMaps();
	
	$('area').on('click', function() {
		alert($(this).attr('alt') + ' clicked');
	});
});

Этот скриптик добавь после подключенного первого скрипта.

Comments

[Денис Приходько]

@danielhope подключал, все равно не работает. Не могу понять в чем может быть проблема.

[Денис Приходько]

@danielhope подключал, все равно не работает. Не могу понять в чем может быть проблема.

Answer 4

[Данил Нестеров]

это вместо подключаемого плагина немного доделал. Должен нормально работать.

код

;(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);