jQueryの：私はイメージマップやファイルを持っているデータファイル

Question

からの座標に基づいて、動的な画像マーカーは座標のリストが含まれています

var coord_data = { 
    "100 100": "2010-_MG_0419.jpg" 
    "110 110": "2010-_MG_0412.jpg"}; 

は、私がイメージマップ上のこれらの各座標上のマーカーを載せていきたいと思います。

@RDevingからいくつかのインスピレーションを取得、私は何とか働いているバージョンがあります：

Fiddle Link

をしかし、私は変更する場合：

   $('<span class="marker"/>').css({ 
       "top": 100, 
       "left": 200 
      }).appendTo(target); 

へ：

   $('<span class="marker"/>').css({ 
       "top": coords[0], 
       "left": coords[1] 
      }).appendTo(target); 

マーカーはマーカーの位置には作用しません。

私はしばらくの間、無駄に検索しました。

なぜこのような行動をしているのですか？

Answer 1

はちょうど...

// Have some css 
img#myimage { 
    position: relative; 
} 
label.icon { 
    position: absolute; 
} 


//Append them dynamically 
const $imgTag = $("img#myimage"); 

coord_data.forEach(data => { 
    const coords = data.split(" "); 
    $imgTag.append($("<label>").addClass("icon").css({ 
    'top': coords[0], 
    'left': coords[1] 
    })); 
}); 

Answer 2

OKは、私は解決策を持ってあなたは "IMG" DOM要素でイメージを持っている場合は、可能性があります。 値が「文字列型」の場合は、「px」も追加する必要があります。 しかし、値が "整数"タイプの場合、 "px"は必要ありません。

だから、これは動作します：あなたのコメントについて

$('<span class="marker"/>').css({ 
    "top": coords[0]+"px", 
    "left": coords[1]+"px" 
    }).appendTo(target); 

それとも

"top": parseInt(coords[0]),