調整窗口大小時調整圖像地圖大小

Question

我正在嘗試在窗口調整大小事件上調整圖像地圖的大小。 我得到的最接近的是使用 mouseclick 事件，但它需要為我正在做的事情調整窗口大小。 我正在使用 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 插件似乎提供了最簡單的解決方案。 您可以使用它的 resize 方法（如果需要，它甚至可以為調整大小設置動畫！）如下調整圖像及其圖像映射的大小：

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

您可以在ImageMapster 的演示頁面上找到指向jsFiddle的鏈接，該鏈接 演示了調整圖像大小及其地圖以響應更改瀏覽器窗口。

Answer 3

我想你想要的是http://home.comcast.net/~urbanjost/semaphore.html

我在這里展示了如何在圖像顯示大小更改時更改圖像地圖坐標的不同示例。

Answer 4

作為 Viktor 答案的修改版本，此版本可以處理多個調整大小。 它存儲初始值以與任何未來調整大小進行比較。 這也使用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

這是一個不使用 jQuery 的解決方案。

首先，構建一個庫函數：

var ImageMap = {
    resize: function(coords, mapWidth) {
        var areas = document.getElementsByTagName('area'),
            imageWidth = document.querySelector("#map").clientWidth,
            resize = imageWidth / mapWidth;

        for (var i=0; i<coords.length; i++) {
            var temp = coords[i].map(x=>Math.round(x*resize));
            areas[i].coords = temp.join(',');
        }
    },
    getCoords: function(){
        var areas = document.getElementsByTagName('area'),
            array = [];
        for (var i=0; i<areas.length; i++) {
            array.push(areas[i].coords.split(',').map(x=>+x));
        }
        return array;
    }
};

然后，在頁面最初加載時調用 resize 函數，並在調整大小時調用：

var coords = ImageMap.getCoords();
window.onload = function () {
    ImageMap.resize(coords, 500);
}
window.onresize = function () {
    ImageMap.resize(coords, 500);
}

將 500 替換為您的默認地圖大小

Answer 6

加載或調整窗口大小時重新計算圖像映射坐標的具體示例：

此圖像是 1930 * 3360 ：

  <div>
    <img id = "alhambra" src="filename.png" usemap="#image-map" width=100%>

    <map name="image-map">
        <area target="" alt="home" id = "home" title="home" href="" coords="1905,307,35,12" shape="rect">
        <area target="" alt="vaciado" id = "vaciado" title="vaciado" href="" coords="141,367,1783,631" shape="rect">
        <area target="" alt="tienda" id = "tienda" title="tienda" href="" coords="282,1408,278" shape="circle">
        <area target="" alt="stocks" id = "stocks" title="stocks" href="" coords="1300,2968,722,2699" shape="rect">
        <area target="" alt="whatsapp" id = "whatsapp" title="whatsapp" href="" coords="506,2980,1788,3193" shape="rect">
        <area target="" alt="direccion" id = "direccion" title="direccion" href="" coords="43,3215,1883,3324" shape="rect">
    </map>
  </div>

並在正文之后添加腳本：

</body>
<script>
  let text_home_coord = document.getElementById('home').coords;
  let text_vaciado_coord = document.getElementById('vaciado').coords;
  let text_tienda_coord = document.getElementById('tienda').coords;
  let text_stocks_coord = document.getElementById('stocks').coords;
  let text_whatsapp_coord = document.getElementById('whatsapp').coords;
  let text_direccion_coord = document.getElementById('direccion').coords;
  
  function img_map_response(){

    // get width and height in pixel
  var width_100_in_px = document.getElementById('alhambra').offsetWidth;
  var height_100_in_px = document.getElementById('alhambra').offsetHeight;

  // recalculate coords of image map
  function get_coor_resp(nombre_coords){

    // real width and height of image map
    var img_real_width="1930";
    var img_real_height="3360";

    // convert string coords to array
    text_array = nombre_coords.split(',');

    // rect
    if (text_array.length == 4) {
      // convert strig to integer
      x1 = parseInt(parseInt(text_array[0])*parseInt(width_100_in_px)/parseInt(img_real_width));
      y1 = parseInt(parseInt(text_array[1])*parseInt(height_100_in_px)/parseInt(img_real_height));
      x2 = parseInt(parseInt(text_array[2])*parseInt(width_100_in_px)/parseInt(img_real_width));
      y2 = parseInt(parseInt(text_array[3])*parseInt(height_100_in_px)/parseInt(img_real_height));
      // result converted in array of strings
      array_txt =[x1.toString(), y1.toString(), x2.toString(), y2.toString()]
      console.log("array_txt",array_txt)
      return array_txt.join(',')

    // circle
    } else {
      // convert strig to integer
      x1 = parseInt(parseInt(text_array[0])*parseInt(width_100_in_px)/parseInt(img_real_width));
      y1 = parseInt(parseInt(text_array[1])*parseInt(height_100_in_px)/parseInt(img_real_height));
      r = parseInt(parseInt(text_array[2])*parseInt(width_100_in_px)/parseInt(img_real_width));
      // result converted in array of strings
      array_txt =[x1.toString(), y1.toString(), r.toString()]
      return array_txt.join(',')        
    }
  }
  
 // set coords by recalculate coords (converted in string)
  document.getElementById('home').coords=get_coor_resp(text_home_coord);
  document.getElementById('vaciado').coords=get_coor_resp(text_vaciado_coord);
  document.getElementById('tienda').coords=get_coor_resp(text_tienda_coord);
  document.getElementById('stocks').coords=get_coor_resp(text_stocks_coord);
  document.getElementById('whatsapp').coords=get_coor_resp(text_whatsapp_coord);
  document.getElementById('direccion').coords=get_coor_resp(text_direccion_coord);
}
// add events load and resize for recalculate coords
window.addEventListener('load', img_map_response);
window.addEventListener('resize', img_map_response);
</script>

</html>

Answer 7

要在調整窗口大小時調用函數，請嘗試以下操作：

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

此外，第 37 行缺少美元符號：

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

它應該是：

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

Answer 8

如果您只需要調整圖像大小，請使用此技術： http : //www.cssplay.co.uk/layouts/background.html

感謝 CSSPlay。