ajouter des points à une carte météo

Question

J'ai une carte météo sur mon site (jpg), mais elle n'indique pas les villes. Je voudrais ajouter un point (avec un index) montrer des villes particulières. Quelle est la meilleure façon de le faire. Puis-je utiliser jquery pour ça?

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

Pour ajouter une autre ville, il suffit d'ajouter un autre <a ...> à votre HTML et lui donner une autre classname, comme POS3. Ensuite, vous pouvez ajouter .pos3 à votre code CSS et changer les coordonnées avec top et left valeurs