0

タイプ circle のこのイメージ マップを、特定の上座標と左座標、およびこれらの座標 (300,115,10) に基づく適切なサイズを持つ div に変換しようとしています。

<img src="http://localhost//images/baby.png"  alt="Planets" usemap="#MyMap">

<map name="MyMap">
  <area alt="Venus" href="venus.htm" coords="300,115,10" shape="circle">
</map>

これらの座標から top 、 left 、 width 、および height を抽出し、イメージ マップに似た円形の div を作成することは可能ですか? javascript/css コードは役に立ちます。

4

2 に答える 2

1

試着してサイズを測る...

デモ: http://jsfiddle.net/mTM4q/2/

HTML

<div>
    <img src="http://placekitten.com/500/400" />
    <a class="planet venus" href="#venus"></a>
    <a class="planet jupiter" href="#jupiter"></a>
</div>

CSS

div {
    position: relative;
}

div > * {
    position: absolute;
}

.planet {
    border-radius: 50%;
}

.venus {
    width: 100px;
    height: 100px;
    left: 300px;
    top: 115px;
    background-color: red;
}

.jupiter {
    width: 250px;
    height: 250px;
    top: 100px;
    left: 50px;
    background-color: blue;
}

私が行ったことは、座標をそれぞれの CSS に入れること.planetです。これは、topおよびleftCSS 値に対応します。

于 2013-10-14T13:14:50.267 に答える