爲天氣圖添加點

Question

我在我的網站（jpg）上有天氣圖，但它不表示城市。我想補充一點（用索引）顯示特定的城市。什麼是最好的方式來做到這一點。我可以使用jquery嗎？

Answer 1

HTML：

<div id="weathermap"> 
    <a class="point pos1" href="/city_1" title="City One"><span class="hide">City one</span><span class="dot">.</span></a> 
    <a class="point pos2" href="/city_2" title="City Two"><span class="hide">City two</span><span class="dot">.</span></a> 
    <img src="weather.jpg" alt="Weather Map" /> 
</div> 

CSS：

#weathermap { 
     position: relative; 
     padding: 0; 
    } 

    .point { 
     position: absolute; 
     line-height: 16px; 
    } 

    span.hide { 
     display: none; // Don't show 'city one' on the map 
    } 

    span.dot { 
     display: block; 
     // This background picture is a simple marker of 16px by 16px 
     background: transparent url(marker.png) no-repeat scroll center center; 
     width: 16px; 
     height: 16px; 
     text-indent: -9999px; //Remove the dot to replace it with a marker 
    } 

    .pos1 { 
     top: 50px; 
     left: 100px; 
    } 

    .pos2 { 
     top: 120px; 
     left: 10px; 
    } 

要添加其他城市，只需添加另一個<a ...>到HTML，並給它一個類名，像POS3。然後，您可以將.pos3添加到您的CSS代碼中，並使用top和left的值更改座標值