イメージのさまざまな部分をクリックして別の目的地に向けるにはどうすればいいですか？

Question

私はpng画像を持っています。それはマップです。それはフランス、イタリア、スペイン、ドイツの4つの国を表しています。私は何をする必要がありますか？CSSを使い分けて、各ゾーンにカーソルを移動すると、各国の名前でポップアップ。

Divはすべての国の正確な形をとる必要はありません。

この画像内の各ゾーンにdivを入れる方法はありますか？

今私はこれをしようとしているために

：

container{ 
    width : 100px; 
    height : 100px; 
    overflow : hidden; 
} 

をし、HTMLは次のとおりです。

<div class = "container"><img src="src/assets/img_map.png"/></div> 

Answer 1

使用イメージマップ（HTML要素mapとarea）とJavaScriptを経由して、必要な強調表示を行います。

コンテナにposition: relativeを入れて、position: absoluteというdivをコンテナに追加してください。

Answer 2

画像

にイメージマップをホットスポット/イメージマップを作成し、ユーザーは、画像の異なる部分をクリックすると、別の目的地に向けられるグラフィックイメージです。イメージマップは、それぞれのホットエリアをx座標とy座標（左上隅を基準にして）で定義することによって作成されます。座標の各セットを使用して、ユーザーがその領域内をクリックしたときに誘導されるリンクを指定します。このラッパーdivの内側に国のdivを置き、その後、バックグラウンドイマヘンとして地図画像をdiv要素を設定し

Image map generator link

Answer 3

。