是否可以創建地圖html區域的百分比？

Question

我需要這樣創造的東西：

http://www.mrporter.com/journal/journal_issue71/2#2

凡在我的大圖像的每一件產品與出現在鼠標懸停工具提示相關聯。 但我需要這個工作與全屏圖像。

我認爲的第一個解決方案（如上例）是map html解決方案，其中每個解決方案都完全填滿我產品的邊界。 問題是我不能表示精確值對我來說，因爲我的圖像大小取決於窗口屏幕。

最好的解決方案是可以爲我的區域設置百分比值。 這可能嗎？還有其他建議嗎？

Answer 1

圖像映射中的百分比不是一個選項。您可能想要獲取一些涉及重新計算圖像大小確切位置的腳本（JS）。當然，在該腳本中，如果需要，可以使用百分比。

Answer 2

考慮在一些CSS中使用RaphaëlJavaScript庫。見http://raphaeljs.com/和Drawing over an image using Raphael.js。

Answer 3

因爲這不能用簡單的HTML/CSS操作來完成，所以唯一的選擇就是JavaScript來根據圖像大小重新計算座標。爲此我已經把一個函數（雖然有涉及到兩個函數）達到這一目的：

function findSizes(el, src) { 
    if (!el || !src) { 
     return false; 
    } 
    else { 
     var wGCS = window.getComputedStyle, 
      pI = parseInt, 
      dimensions = {}; 
     dimensions.actualWidth = pI(wGCS(el, null).width.replace('px', ''), 10); 
     var newImg = document.createElement('img'); 
     newImg.src = src; 
     newImg.style.position = 'absolute'; 
     newImg.style.left = '-10000px'; 
     document.body.appendChild(newImg); 
     dimensions.originalWidth = newImg.width; 
     document.body.removeChild(newImg); 
     return dimensions; 
    } 
} 

function remap(imgElem) { 
    if (!imgElem) { 
     return false; 
    } 
    else { 
     var mapName = imgElem 
      .getAttribute('usemap') 
      .substring(1), 
      map = document.getElementsByName(mapName)[0], 
      areas = map.getElementsByTagName('area'), 
      imgSrc = imgElem.src, 
      sizes = findSizes(imgElem, imgSrc), 
      currentWidth = sizes.actualWidth, 
      originalWidth = sizes.originalWidth, 
      multiplier = currentWidth/originalWidth, 
      newCoords; 

     for (var i = 0, len = areas.length; i < len; i++) { 
      newCoords = areas[i] 
       .getAttribute('coords') 
       .replace(/(\d+)/g,function(a){ 
        return Math.round(a * multiplier); 
       }); 
      areas[i].setAttribute('coords',newCoords); 
     } 
    } 
} 

var imgElement = document.getElementsByTagName('img')[0]; 

remap(imgElement);​ 

JS Fiddle demo。

請注意，這需要一個實現window.getComputedStyle()（最新的瀏覽器，但僅限於版本9以上的IE）的瀏覽器。此外，除了確保將所需的參數傳遞給函數之外，沒有任何理智檢查。但是，如果你想嘗試，這應該是一個開始。

參考文獻：

• document.body。
• document.createElement()。
• document.getElementsByName()。
• document.getElementsByTagName()。
• element.getAttribute()。
• element.setAttribute()。
• element.style。
• Math.round()。
• node.appendChild()。
• node.removeChild()。
• parseInt()。
• string.replace()。
• string.substring()。
• window.getComputedStyle。

Answer 4

這個jQuery RWD Image Maps有一個jQuery插件。

您可能要整合待處理的拉請求（手動），以支持 「寬度= 100％」：https://github.com/stowball/jQuery-rwdImageMaps/pull/10

Answer 5

替代使用的解決方案鏈接：

CSS：

.image{ 
    position: relative; 
} 
.image a{ 
    display: block;  
    position: absolute; 
} 

HTML：

<div class="image"> 
    <img src="image.jpg" alt="image" /> 
    <a href="http://www.example.cz/1.html" style="top: 10%; left: 10%; width: 15%; height: 15%;"></a> 
    <a href="http://www.example.cz/2.html" style="top: 20%; left: 50%; width: 15%; height: 15%;"></a> 
    <a href="http://www.example.cz/3.html" style="top: 50%; left: 80%; width: 15%; height: 15%;"></a> 
</div> 

百分比尺寸可檢測特德圖形編輯