2

HTMLページに表示された画像の領域にホットスポットしたいと思います。ただし、この画像は表示画面に基づいて幅と高さを変更します。

<img height="100%" width="100%" src="img.png"/>

どうすればホットスポットできますか? 元の座標をサイズ変更された画像の座標にマップする関数を考えていました。

4

2 に答える 2

4

画像とホットスポットを相対的に配置された要素に配置し、パーセンテージを使用してホットスポットを絶対に配置できます。

CSS

.hotspotted {
    position: relative;
}

.hotspot {
    display: block;
    position: absolute;
}

#hotspot1 {
   height: 81%;
   left: 9%;
   top: 16%;
   width: 45%;
}

#hotspot2{
    height: 18%; 
    right: 11%;
    top: 20%;
    width: 11%;
}

HTML

<div class="hotspotted">
    <img height="100%" width="100%" src="img.png"/>
    <a href="#" id="hotspot1" class="hotspot"></a>
    <a href="#" id="hotspot2" class="hotspot"></a>
</div>

アップデート

マップを使用する場合は、パーセンテージを使用するのではなく、新しい座標を計算することをお勧めします。これは、次の式を使用して非常に簡単に行うことができます。

new_x = (orginal_x / original_image_width) * new_image_width
new_y = (orignal_y / original_image_height) * new_image_height
于 2012-07-10T11:05:30.587 に答える
0

座標（x、y）をパーセンテージに変換する必要があります。

たとえば、画像の幅が200ピクセル、高さが200ピクセルで、座標がx = 50ピクセル、y = 100ピクセルの場合、変換後は次のようになります。

x = 50/200*100 = 25%
y = 100/200*100 = 50%

これで、画像が画面全体を占めると仮定すると、座標は常に画面の左から25％、上から50％であることがわかります。これはあなたが求めていたものですか？:)

于 2012-07-10T11:02:40.087 に答える