adding points to a weather map
I have a weather map on my website (jpg), but it does not indicate cities. I would like to add point开发者_开发百科 (with an index) show particular cities. What is the best way to do that. Can I use jquery for that?
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;
}
To add another city, just add another <a ...>
to your HTML and give it another classname, like pos3. Then you can add .pos3
to you CSS-code and change the coordinates with top
and left
values
精彩评论