使用 JS/CSS 将 <area> 转换为具有完全相同位置和形状的 <div>答案

【问题标题】：Converting an <area> into a <div> with the exact same position and shape using JS/CSS使用 JS/CSS 将 <area> 转换为具有完全相同位置和形状的 <div>
【发布时间】：2013-10-14 12:54:49
【问题描述】：

我正在尝试将此圆形类型的图像映射转换为具有特定顶部和左侧坐标以及基于这些坐标 (300,115,10) 的适当大小的 div

<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>

现在是否可以从这些坐标中提取出 top、left、width 和 height 并构造一个类似于图像映射的圆形 div？任何 javascript/css 代码都会有所帮助。

【问题讨论】：

jsfiddle.net/LwKdF/1 一种方式

标签： javascript jquery html css imagemap

【解决方案1】：

看看这个：>>Fiddle<<

它为所有映射图像中的所有圆形区域创建“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() 函数并使用该值。注意：如果你的图像移动了，就像它改变从 position() 返回的值一样，你必须重新定位 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;
}

【讨论】：

【解决方案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 值。

【讨论】：