날씨지도에 포인트 추가

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

그냥 pos3처럼, 당신의 HTML에 다른 <a ...>를 추가하고 또 다른 클래스 이름을주고, 다른 도시를 추가 할 수 있습니다. 그런 다음 .pos3을 CSS 코드에 추가하고 top 및 left 값을 사용하여 좌표를 변경하십시오.