Jquery 如何获得图像地图上的跨度_Jquery_Html

Jquery 如何获得图像地图上的跨度

jquery html

Jquery 如何获得图像地图上的跨度,jquery,html,Jquery,Html,我看到其他人也有同样的问题，但我试过的都不管用。我希望有人能更新这段代码，当你点击图片时，它会在图片上方显示123 图像测试 $（文档）.ready（函数（）{ $（“#测试”）。单击（函数（）{ $（“#test”）.append（'span'）.text（'123'）； }); }); 谢谢你你有几个问题。首先，在这两种情况下，使用.append（'span'）.text（'123'）都会追加文本值。要添加span请在append（）调用中使用HTML。您还需要将span附加到包

我看到其他人也有同样的问题，但我试过的都不管用。我希望有人能更新这段代码，当你点击图片时，它会在图片上方显示123


图像测试
$（文档）.ready（函数（）{
$（“#测试”）。单击（函数（）{
$（“#test”）.append（'span'）.text（'123'）；
});
});

谢谢你

你有几个问题。首先，在这两种情况下，使用

.append（'span'）.text（'123'）

都会追加文本值。要添加

span

请在

append（）调用中使用HTML。您还需要将span
附加到包含div
，而不是map
，因为这只会导致无效的HTML
要将附加的span
集中对齐，只需使用CSS定位，如下所示：

$（文档）.ready（函数（）{
$（“#测试”）。单击（函数（）{
$（“#容器”）.append（'123'）；
});
});
#容器{
位置：相对位置；
}
#集装箱跨度{
位置：绝对位置；
顶部：21px；
左：0；
宽度：60px；
颜色：#fff；
文本对齐：居中；
}
您有几个问题。首先，在这两种情况下，使用.append（'span'）.text（'123'）
都会追加文本值。要添加span
请在append（）调用中使用HTML。您还需要将span
附加到包含div
，而不是map
，因为这只会导致无效的HTML
要将附加的span
集中对齐，只需使用CSS定位，如下所示：

$（文档）.ready（函数（）{
$（“#测试”）。单击（函数（）{
$（“#容器”）.append（'123'）；
});
});
#容器{
位置：相对位置；
}
#集装箱跨度{
位置：绝对位置；
顶部：21px；
左：0；
宽度：60px；
颜色：#fff；
文本对齐：居中；
}

像这样的东西

然后，您可以使用左
和顶
来准确定位您想要的位置。
类似的东西

然后，您可以使用左
和顶
来精确定位。
尝试此更新的小提琴：
$（文档）.ready（函数（）{
$（“#测试”）。单击（函数（）{
$（“#test”）.append（'123'）；
});
}); 
#测试跨度
{
位置：绝对位置；
顶部：29px；
左：24px；
颜色：红色；
}
试试这个更新的小提琴：
$（文档）.ready（函数（）{
$（“#测试”）。单击（函数（）{
$（“#test”）.append（'123'）；
});
}); 
#测试跨度
{
位置：绝对位置；
顶部：29px；
左：24px；
颜色：红色；
}
coords应该是0,0,50,50，这在Firefox中不起作用coords应该是0,0,50,50，这在Firefox中也不起作用谢谢你正是我需要的。很高兴我能帮你：谢谢你正是我需要的。很高兴我能帮你：谢谢你正是我需要的
<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> 

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

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