图像映射顶部的文本

Text on top of image map

本文关键字：文本 顶部 映射 图像      更新时间：2023-09-26

目前，我有一个带有图像映射的图像。有没有办法让我编写一些 JavaScript 代码，将区域名称用作变量来显示其上的实际内容？所有文本和区域名称都已在数据数组中。

例如，如果此区域名为 Area1，则内部将包含文本 Text1，依此类推。

我为什么要这样做？对我来说，打印出来更容易，上面有名字。

编辑：图像映射示例

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
  <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
  <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>

不是很精确，但它可以成为进一步改进的良好基础

http://jsfiddle.net/6amd2842/1/

.HTML： 

<div id="map">
    <img src="http://placehold.it/145x126" width="145" height="126" alt="Planets" usemap="#planetmap">
</div>
<map name="planetmap">
    <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun" data-name="Sun">
    <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury"  data-name="Mercury">
    <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus" data-name="Venus">
</map>

.CSS：

#map {
    position:relative
}
.map_title {
    position:absolute;    
}

JQ：

$(function() {
    $('area').each(function(){
        var txt=$(this).data('name');
        var coor=$(this).attr('coords');
        var coorA=coor.split(',');
        var left=coorA[0];
        var top=coorA[1];
        var $span=$('<span class="map_title">'+txt+'</span>');        
        $span.css({top: top+'px', left: left+'px', position:'absolute'});
        $span.appendTo('#map');
    })
})
相关文章：