私は「Web Guy」ではないと主張することで、この質問の前に説明します。 JavaScriptや他のWebベースのプログラミング技術では、XMLやいくつかの関連するXSLT以外のプログラミング経験はほとんどありません。私の上で簡単に行く！イメージの「アンカーポイント」を別のイメージに作成できますか？
私が作成しようとしているのは、イメージマップに似たものです。ハードウェアシャーシから受け取った情報に基づいてWebページに画像を配置し、さまざまな「ハードウェアその場所にあるハードウェアのイメージを使用して、シャーシのイメージに「スロット」を表示します。
これらの点を作成し、ブラウザウィンドウではなく画像に関連させたいので、シャーシのイメージを作成して、適切なスロットにカードのイメージを配置することができます。
varsを使用してオフセットを保持し、シャーシイメージに対するオフセットをvarで使用して他のイメージを配置するメカニズムはありますか。このようなことをする別の方法はありますか？
について読むことができ、いくつかのマークアップのためのスケッチは、このようなものになるだろう。
<div class="chassi">
<div id="slot1" class="slot"></div>
<div id="slot2" class="slot"></div>
// more slots if needed
</div>
<style>
.chassi
{
position: relative;
background: url(/path/to/your/image.png);
}
.slot
{
position:absolute;
}
#slot1
{
left: 20px;
top: 20px;
}
#slot2
{
left: 20px;
top: 60px;
}
</style>
次に、JavaScriptを使用してスロットデータを読み込み、「スロット」-divsに画像を追加します。
CSSアブソリュート/相対配置を使用して、それらを正しい位置に置くことができます。
もう1つの解決策は、実際に複数の他の画像からなる画像を描画するために<canvas>を使用することです。
これは正確に私が調べる必要があるように見えます。私が言ったように、ウェブプログラミングの無知は、私がこのようなものを掘り下げるとすぐにわかります。どうもありがとう！ –
ITSはimage mappingと呼ばれ、あなたはそれ私がThiefMasterに同意here
イメージマップの「領域」に別のイメージを配置できますか？私は "href"属性を参照していますが、イメージsrcを取るでしょうか？ –
これは正しくありません。画像マップは、複数のクリック可能な領域を持つ1つの画像です。ポスターは、複数の画像を1つに収めたいと考えています。 –
あなたを驚かせてくれました！十分にあなたに感謝することはできません。 –
問題はありません。フォローアップに関する質問があれば教えてください。がんばろう！ :-) –