0

我正在尝试将此圆形类型的图像映射转换为具有特定顶部和左侧坐标以及基于这些坐标（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 代码都会有所帮助。

4

2 回答 2

3

看看这个：>>小提琴<<

  • 它为文档中所有映射图像中的所有圆形区域创建“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;
}
于 2013-10-14T14:13:51.930 回答
1

试穿这个尺寸...

演示：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. 这对应于top和leftCSS 值。

于 2013-10-14T13:14:50.267 回答