html - 画像とリンクを画像に配置する

Question

テキストまたは画像のいずれかのリンクを配置したい画像があります。ウィキペディアの例 (ドイツとその州の地図) のほとんどは次のとおりですmap。

ウィキペディアでマップのソースコードを調べたところ、すべての状態が絶対位置であることに気付きました。それで、そのようなことを実装する簡単な方法はありますか? または、たとえば Photoshop を使用して絶対位置を確認し、それを CSS/HTML にハードコーディングする必要がありますか?

score 2 · Accepted Answer

既にお気づきのように、ウィキペディア<div>では画像の上に配置される要素を使用しています。何らかの方法で、画像の上に配置するテキストの (絶対) 座標を指定する必要があります。

いじって正しい座標を取得するか、(ny) 画像編集アプリケーションを使用して、画像内で必要な座標を正確に見つけることができます。

ウィキペディアはこのような構造を使用しています

HTML:

<div class="container">
  <img src="myImage.png" />
  <div class="text1">Text1</div>
  <div class="text2">Text2</div>
</div>

CSS:

.text1 {
  position:absolute;
  left:50px;
  top:100px
}

.text2 {
  position:absolute;
  left:200px;
  top:50px
}

(CSS スタイルを HTML 要素に直接配置することを除いて...)

score 1 · Accepted Answer

HTML マップ (たとえばhttp://www.w3schools.com/tags/tag_map.asp ) と、その上にテキストを含めるための JavaScriptが必要だと思います。

次の質問を見てください、それはあなたを助けるかもしれません:

score 0 · Accepted Answer

あなたが言及したリンクに似たものを作成している場合は、それらの位置を特定する必要があります. ではない？absolute positioningその場合は行くのが良いです。

ただし、シナリオでこれらのリンクを画像の正確な場所に配置する必要がない場合は、次のような方法を試すことができます。

CSS//////////

div.back{
    background:url('path/to/your/image.extension');
    width:/*width of the image*/;
    height:/*height of the image*/
}

これdivとクラスbackは、あなたが望むように機能します。次に、リンクをの中に入れるdivと、その画像の上にリンクが表示されます。

このフィドルをチェックしてください。

3 に答える 3