Question

我看到其他人有同样的问题，但我没有尝试过。我希望有人可以更新此代码，以便在您单击图像时在图像上显示123。

<html>  
  <head>  
    <meta charset="UTF-8">  
    <title>Image Test</title>  
    <script src="jquery-3.1.1.min.js"></script>  
    <script>  
      $(document).ready(function() {  
        $("#test").click(function(){
          $("#test").append('span').text('123');
        });
      });   
    </script>  
  </head>  
  <body>
    <div>
      <img id="ohiomap" src="http://www.echoecho.com/rainbow.gif" border="0" usemap="#Map" />
      <map name="Map" id="Map">
        <area shape="rectangle" coords="0,10,20,30" id="test"/>
      </map>
    </div>
  </body>  
</html>

谢谢

Answer 1

你有几个问题。首先，您使用.append('span').text('123')会在两种情况下附加文本值。要在span电话中添加append()使用HTML。您还需要将span附加到包含div，而不是map，因为这会导致无效的HTML。

要集中对齐附加的span，您只需要使用CSS定位，如下所示：

＆＃13;

$(document).ready(function() {
  $("#test").click(function() {
    $("#container").append('<span>123</span>');
  });
});

＆＃13;

#container {
  position: relative;
}
#container span {
  position: absolute;
  top: 21px;
  left: 0;
  width: 60px;
  color: #fff;
  text-align: center;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <img id="ohiomap" src="http://www.echoecho.com/rainbow.gif" border="0" usemap="#Map" />
  <map name="Map" id="Map">
    <area shape="rectangle" coords="0,0,50,50" id="test" />
  </map>
</div>

＆＃13;

Answer 2

这样的东西？

https://jsfiddle.net/tgbvf3sy/9/

然后，您可以使用left和top来完全按照自己的意愿定位。

Answer 3

试试这个更新的小提琴：jsfiddle.net/tgbvf3sy/10/

$(document).ready(function() {  
        $("#test").click(function(){
            $("#test").append('<span>123</span>');
    });
}); 

#test span
{
    position: absolute;
    top: 29px;
    left: 24px;
    color: red;
}

如何在图像映射上获得跨度

3 个答案: