0

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

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

4

3 に答える 3

2

既にお気づきのように、ウィキペディア<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 要素に直接配置することを除いて...)

実際の例については、この jsFiddleを参照してください。

于 2013-01-09T14:24:07.347 に答える
1

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

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

HTML、jQuery : イメージ マップの領域にテキストを表示する

于 2013-01-09T14:12:57.417 に答える
0

あなたが言及したリンクに似たものを作成している場合は、それらの位置を特定する必要があります. ではない？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と、その画像の上にリンクが表示されます。

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

于 2013-01-09T14:16:55.287 に答える