jquery - 天気図にポイントを追加する

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

別の都市を追加するには、HTMLに別の都市を追加<a ...>し、pos3などの別のクラス名を付けます。.pos3次に、CSSコードを追加し、座標topとleft値を変更できます