轉換 <area> 變成一個 <div> 使用JS / CSS具有完全相同的位置和形狀

Question

我正在嘗試將這個類型為circle的圖像映射轉換為具有特定的頂部和左側坐標以及基於這些坐標的適當大小的div（300,115,10）

<img src="http://localhost//images/baby.png"  alt="Planets" usemap="#MyMap">

<map name="MyMap">
  <area alt="Venus" href="venus.htm" coords="300,115,10" shape="circle">
</map>

現在可以從這些坐標中提取頂部，左側，寬度和高度，並構造一個類似於圖像地圖的圓形div了嗎？ 任何javascript / css代碼都將有所幫助。

Answer 1

檢查一下： >>小提琴<<

• 它為文檔中所有映射圖像中的所有圓圈區域創建“ a”。
• 創建的a仍然具有與其所在區域相同的鏈接。
• area的alt屬性作為css類添加到a的中，因此您可以使用css設置樣式

腳步：

• 創建一個新的容器div，其大小和位置與映射的圖像相同。

   var $img = $(img); var $imgmap = $("<div class='imgmap'></div>"); $img.after($imgmap); var imgheight = $img.height(); var imgwidth = $img.width(); var imgPosition = $img.position(); $imgmap.css( { top:imgPosition.top+"px", left:imgPosition.left+"px", height:imgheight+"px", width:imgwidth+"px" }); 

• 在地圖內找到圖片的地圖名稱和圓圈

   var mapName = $img.attr("usemap").replace("#",""); var circles = $("map[name='"+mapName+"'] area[shape='circle']"); 

• 遍歷所有圈子

   circles.each(function(index,circle){ var $circle = $(circle); var attrs = $circle.attr("coords").split(",");//get coords attribute and turn it in to an arrat var alt = $circle.attr("alt"); // get alt of the area var $newa = $("<a class='mapcircle "+alt+"' href='"+$circle.attr("href")+"' alt='"+alt+"'></a>"); //create a new anchor $imgmap.append($newa); //append that to previously created container //apply position and size var size = (attrs[2]*2)+'px' $newa.css( { left:attrs[0]+'px', top:attrs[1]+'px', width:size, height:size }); }); 

CSS：

• 容器css，絕對定位，因此我們可以使用jquery的positon（）函數並使用該值。 注意：如果圖像移動，就像改變位置（）返回的值一樣，則必須重新定位div。 解決方案可能是，將包括圖像的所有東西相對定位或包裝在另一個容器中，然后用它替換圖像。

   .imgmap{ position:absolute; z-index:10; box-sizing:border-box; margin:0; padding:0; } 

• 行星！ 很簡單，但是：默認顏色是綠色，半徑50％使它們變圓，新類（由區域的alt屬性賦予）用於單獨的着色。

   a.mapcircle{ display:block; position:absolute; background-color:green; border-radius:50%; } .mapcircle.Venus{ background-color:yellow; } .mapcircle.Earth{ background-color:red; opacity:0.5; } 

Answer 2

試試這個尺寸...

演示： http : //jsfiddle.net/mTM4q/2/

HTML

<div>
    <img src="http://placekitten.com/500/400" />
    <a class="planet venus" href="#venus"></a>
    <a class="planet jupiter" href="#jupiter"></a>
</div>

CSS

div {
    position: relative;
}

div > * {
    position: absolute;
}

.planet {
    border-radius: 50%;
}

.venus {
    width: 100px;
    height: 100px;
    left: 300px;
    top: 115px;
    background-color: red;
}

.jupiter {
    width: 250px;
    height: 250px;
    top: 100px;
    left: 50px;
    background-color: blue;
}

我所做的是將每個.planet的坐標放入CSS中。 這與top和left CSS值相對應。