Изменить размер изображения карты на изменение размера окна

Question

Я пытаюсь изменить размер карты изображения на событии изменения размера окна. Самое близкое, что я получил, - это использование события щелчка мышью, но для того, что я делаю, нужно изменить размер окна. Я использую Firefox 3.5.5

Я немного использую jquery. Вот мой пример - кнопка области, которую я хочу изменить при изменении размера окна, находится в левом верхнем углу (нажмите на нее, чтобы изменить размер карты и кнопки области):

http://www.whitebrickstudios.com/foghornstour/imagemap3.html

Любая помощь будет оценена! Спасибо, Рич

Answer 1

Я написал несколько простых функций, чтобы перестроить все точки карты на каждом событии. Попробуйте это

function mapRebuild(scaleValue) {
    var map = $("#imgmap"); // select your map or for all map you can choose $("map").each(function() { map = $(this);.....})
    map.find("area").each(function() { // select all areas
        var coords = $(this).attr("coords"); // extract coords
            coords = coords.split(","); // split to array
        var scaledCoords = "";
        for (var coord in coords) { // rebuild all coords with scaleValue
              scaledCoords += Math.floor(coords[coord] * scaleValue) + ",";
            }
        scaledCoords = scaledCoords.slice(0, -1); // last coma delete
        $(this).attr("coords", scaledCoords); // set new coords
        });
    }

scaleValue может быть рассчитано как oldWindowWidth / newWindowWidth. Конечно, вам нужно сохранить значение oldWindowWidth при изменении размера окна. Возможно, мое решение не вовремя, но я надеюсь, что это кому-нибудь пригодится

Answer 2

Это старая ветка, но для тех, кто ищет решение для аналогичной или даже идентичной проблемы, плагин ImageMapster jQuery предлагает самое простое решение. Вы можете использовать его метод изменения размера (который может даже анимировать изменение размера при желании!) Следующим образом, чтобы изменить размер изображения вместе с его картой изображения:

$('img').mapster( 'resize', newWidth, newHeight, resizeTime);

Вы можете найти ссылку на демоверсии ImageMapster на jsFiddle, которая демонстрирует изменение размера изображения и его карты в ответ на изменение окна браузера.

Answer 3

Я думаю, что вы хотите на http://home.comcast.net/~urbanjost/semaphore.html

, где я показываю различные примеры того, как изменить координаты карты вашего изображения при изменении размера отображения вашего изображения.

Answer 4

Как модифицированная версия ответа Виктора, эта версия может обрабатывать несколько размеров. Он хранит начальные значения для сравнения с любым изменением размера в будущем. При этом также используется waitForFinalEvent , поэтому при изменении размера он не будет повторяться.

    var mapImg = $('#mapImg');
    var naturalWidth = 1200; // set manually to avoid ie8 issues
    var baseAreas = new Array();
    var scaleValue = mapImg.width() / naturalWidth;

    $(window).resize( function() {
        waitForFinalEvent( function() {
            scaleValue = mapImg.width() / naturalWidth;
            mapRebuild( scaleValue );
        }, 500, 'resize-window');
    });

    function mapRebuild( scaleValue ) {
        var map = $("#imgMap");
        var mapareas = map.find( 'area' );
        if ( baseAreas.length == 0 ) {
            mapareas.each( function() {
                baseAreas.push( $(this).attr( 'coords' ) ); // set initial values
            });
        }
        mapareas.each( function( index ) {
            var coords = baseAreas[index]; // use the corresponding base coordinates        
            coords = coords.split( ',' );       
            var scaledCoords = '';
            for ( var coord in coords ) {
                scaledCoords += Math.floor( coords[coord] * scaleValue ) + ',';
            }
            scaledCoords = scaledCoords.slice( 0, -1 );
            $(this).attr( 'coords', scaledCoords );
        });
    }

    mapRebuild( scaleValue ); // initial scale

Answer 5

Если вам нужно только изменить размер изображения, используйте эту технику: http://www.cssplay.co.uk/layouts/background.html

Благодаря CSSPlay.

Answer 6

Чтобы вызвать функцию при изменении размера окна, попробуйте следующее:

$(window).bind('resize', function() {
    // resize the button here
});

Также в строке 37 отсутствует знак доллара:

scaleXY('theMap',(window).width());

Должно быть:

scaleXY('theMap',$(window).width());