javascript - 使用 JS/CSS 将 转换为具有完全相同位置和形状的

Question

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

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"
      });
  

• 找到图像的 map 名称和 map 中的圆圈

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