Question

我正在尝试将此类型的圆形图像转换为具有特定顶部和左侧坐标以及基于这些坐标的适当大小的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

检查一下：>>Fiddle<<

它为所有映射图像中的所有圆形区域创建“a” 文献。
创建的a仍然与其区域具有相同的链接对应物。
区域的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

尝试使用尺寸......

DEMO：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值相对应。

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

2 个答案:

HTML

CSS