圖片地圖上的文字

目前，我有一張圖片和一張圖片地圖。有沒有辦法讓我編寫一些將使用區域名稱作爲變量的JavaScript代碼來顯示實際上的內容？所有的文本和區域名稱都在數據數組中。圖片地圖上的文字

例如，如果這個區域被命名爲區域1，這將有文字文本1裏面，等

我爲什麼要這麼做？打印出來的名字對我來說更容易。

編輯：圖像映射的實施例

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

來源

2014-12-13 nonion

您在使用谷歌地圖API？或者Mapbox等？ – JasTonAChair 2014-12-13 00:54:18

我既沒有使用過。我正在使用的是HTML圖像地圖。 – nonion 2014-12-13 00:59:38

好的是，某種API？你有一些你可以分享的代碼嗎？ – JasTonAChair 2014-12-13 01:02:18

不是非常精確的，但它可以是進一步改進的良好基礎

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

})

來源

2014-12-13 01:58:56 dm4web

非常感謝你。它正是我想要做的。 – nonion 2014-12-13 04:27:41

1最後一件事，你知道如何讓它自動定位嗎？以便它適合在邊界內。例如：http://i.imgur.com/ky35mC9.jpg。爲此，名稱溢出邊框：\雖然其他一些只在1個位置:( – nonion 2014-12-13 04:36:10

請嘗試這樣的：http://stackoverflow.com/questions/27451159/show-text-on-top-of-image/27455167＃27455167。爲矩形工作 – dm4web 2014-12-13 04:45:21

圖片地圖上的文字

回答

相關問題