有沒有辦法調整圖像大小並讓圖像映射保持在同一個地方？ （HTML / JavaScript的/ CSS）

Question

我目前正在建立一個旨在進行測試的網站。 它有一個圖像和一個圖像映射，我試圖使用JavaScript來獲取客戶端屏幕大小和調整圖像大小以適應客戶端屏幕大小，但當我這樣做時，圖像映射不是我需要它。 有沒有辦法讓圖像映射保持在同一個地方，而不必在油漆或Photoshop中“物理”調整圖像大小。 我的網站 （沒有得到客戶的屏幕尺寸）。 基本上我試圖使圖像適合他們的屏幕，因此它更容易導航測試，它的現實，但沒有搞砸我的圖像地圖定位。 任何肝臟都會非常感激。

    `<map name="desktopmap" >
    <area onclick="correct();" shape="rect" coords="1,575,38,597"  href="OS2.html" >  
    </map>
    <img onclick=" wrong('OS2');" src = "../Pic/desktop.png" usemap = "#desktopmap" >`

謝謝。

Answer 1

你可以做的是使用具有基於百分比的坐標和尺寸的絕對定位的div，並將你的點擊事件掛鈎到那些。 這應該允許您的隱形“按鈕”與圖像很好地縮放。 圖像映射有點過時，不夠靈活。

示例小提琴（使用正確/錯誤的功能更新）：

http://jsfiddle.net/3ZLeK/1/

新的HTML結構示例：

<div class="wrap">
    <img class="bg" src="http://i.imgur.com/WgsCTDj.gif" />
    <div class="box box1"></div>    
</div>

示例新CSS：

.wrap {
    position: relative;
    overflow: auto;
}

.bg {
    float: left;
    width: 100%;
}

.box {
    position: absolute;
    cursor: pointer;
}
.box1 {
    top: 95%;
    left: 0;
    width: 7%;
    height: 5%;
}

在小提琴中，我還更改了內聯Javascript處理以使用事件處理程序，因為這些屬性處理程序也已過時。

Answer 2

您可以使用mediaqueries重新縮放/縮放地圖。 這里有兩個實驗測試： http ： //dabblet.com/gist/5586117和http://codepen.io/gcyrillus/pen/AJHmt

如果您遵循這個想法，並考慮使用zoom + javascript而不是mediaquerie來包含IE之類的舊瀏覽器，請注意某些版本的IE可以理解兩者：transform：scale（x）; 並縮放：X; 。 在這種情況下，請確保你沒有兩次重撥。

基本上，coords是像素coordonates，縮放是唯一的方法，除非你modyfy每個coords的每個值:)

......不太確定我的英語是否清晰/正確。