0
我在我的網站(jpg)上有天氣圖,但它不表示城市。我想補充一點(用索引)顯示特定的城市。什麼是最好的方式來做到這一點。我可以使用jquery嗎?爲天氣圖添加點
我在我的網站(jpg)上有天氣圖,但它不表示城市。我想補充一點(用索引)顯示特定的城市。什麼是最好的方式來做到這一點。我可以使用jquery嗎?爲天氣圖添加點
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
的值更改座標值
取決於您如何計劃在jpg圖像上找到適當的城市座標 – Zed 2010-01-01 11:45:40