テキストまたは画像のいずれかのリンクを配置したい画像があります。ウィキペディアの例 (ドイツとその州の地図) のほとんどは次の
とおりですmap
。
ウィキペディアでマップのソース コードを調べたところ、すべての状態が絶対位置であることに気付きました。それで、そのようなことを実装する簡単な方法はありますか? または、たとえば Photoshop を使用して絶対位置を確認し、それを CSS/HTML にハードコーディングする必要がありますか?
テキストまたは画像のいずれかのリンクを配置したい画像があります。ウィキペディアの例 (ドイツとその州の地図) のほとんどは次の
とおりですmap
。
ウィキペディアでマップのソース コードを調べたところ、すべての状態が絶対位置であることに気付きました。それで、そのようなことを実装する簡単な方法はありますか? または、たとえば Photoshop を使用して絶対位置を確認し、それを CSS/HTML にハードコーディングする必要がありますか?
既にお気づきのように、ウィキペディア<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を参照してください。
HTML マップ (たとえばhttp://www.w3schools.com/tags/tag_map.asp ) と、その上にテキストを含めるための JavaScriptが必要だと思います。
次の質問を見てください、それはあなたを助けるかもしれません:
あなたが言及したリンクに似たものを作成している場合は、それらの位置を特定する必要があります. ではない?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
と、その画像の上にリンクが表示されます。
このフィドルをチェックしてください。