Масштабируйте координаты ImageMap с изображениями динамического размера

Я ищу способ, чтобы мои динамически масштабированные изображения соответствовали картам изображений, которые я делаю. Я использую jquery для масштабирования изображений с размером окна:

$(window).bind("load resize", function(){

        $(".post img").height($(window).height()-110);
        $(".post img").width(($(".post img").newHeight() / $(".post img").oldHeight()) * $(".post img").oldWidth());

});

Но ImageMaps, которые я делаю, остаются верными исходному размеру. Я ищу ImageMapster, но не могу понять, как автоматически масштабировать все карты изображений.

Это страница, для которой он предназначен: http://www.dersuawesome.com/home/


image scale jquery imagemap imagemapster
person DERSU awesome    schedule 28.07.2012    source источник

Ответы (1)


arrow_upward
3
arrow_downward

В imagemapster вы используете: $('img').mapster('resize',width,height,duration);

цитата из оригинальной документации imagemapster:

$('img').mapster('изменить размер',ширина,высота,продолжительность); --- изображение: новая ширина изображения ИЛИ высота: новая высота изображения продолжительность: (необязательно) 0 | миллисекунды (для анимации изменения размера) Это изменит размер карты изображения до указанных размеров. Обратите внимание, что должна быть передана либо ширина >, либо высота, а другая будет рассчитываться с тем же соотношением сторон, что и исходное изображение. Если вы передадите оба значения, для расчета новых размеров будет использоваться только ширина: пропорции должны оставаться такими же, как у исходного изображения.

конец цитаты. например. когда изображение должно стать шириной 900 пикселей, вы используете:

$('img').mapster('resize',900,null,2000);

Здесь я сказал imagemapster использовать 2000 миллисекунд для этого изменения размера, чтобы получить плавный эффект. Помещение этого в секцию onconfigured кода хорошо работает для меня:

onConfigured: function(){
         $('img').mapster('resize',900,null,2000);
        } ,
person Kurt    schedule 29.07.2012
comment
дополнение: у автора imagemapster есть полный пример изменения размера здесь: outsharked. com/imagemapster/default.aspx?demos.html#resize - person Kurt; 29.07.2012
comment
addendum2: еще один полный пример от автора imagemapster находится здесь: jsfiddle.net/jamietre/jQG48 - person Kurt; 29.07.2012
comment
Но разве это не изменяет его размер до заданного размера. Мне нужно, чтобы карты изображений автоматически соответствовали размеру изображения. - person DERSU awesome; 29.07.2012
comment
Может быть, я неправильно вас понимаю. Но когда я правильно понимаю вашу проблему, то пример, который я упоминал в своем дополнении2, должен решить вашу проблему. вы смотрели на этот пример? - person Kurt; 29.07.2012