位置座標値を使用して

Question

次の画像マップコードがあります。

<area shape="rect" coords="213,109,320,256" href="embedded-processors" alt="Embedded Processor" class="embeded-processor" /> 

私は属性を取得することができますが、それは位置のdivのために、私はこのCOORDSに基づいてDIVの位置をしたい、「213109320256」を返しCOORDS。 トップ値と同様213、左側は109pxです。

どのように各値を取得し、ローカル変数に保存することができます。

Answer 1

var coord = area.getAttribute('coords').split(','); 

これにより、すべての値がcoordsの配列が作成されます。次に、上限値にはcoord[0]、左値にはcoord[1]でアクセスできます。

Answer 2

何Sirkoが掲示するので、ここで、jQueryのソリューションjQueryのではありません：あなたは何を得る

var coords = $.map($('.embeded-processor').attr('coords').split(','), parseInt) 

は、整数の配列です：[213, 109, 320, 256]

Answer 3

<div> 
    <p> 
     Click on the sun or on one of the planets to watch it closer:</p> 
    <img src="images/Cart.png" width="145" height="126" alt="Planets" usemap="#planetmap" /> 
    <span id="dataval">0,0</span> 
    <map name="planetmap" id="planetmap" class="planetmap" runat="server"> 

    </map> 
</div> 

jQuery('#planetmap area').each(function (e) { 
    jQuery(this).mousemove(function() { 
     jQuery('#dataval').html(jQuery(this).attr('coords')); 
     jQuery(this).click(function() { 
      jQuery(this).attr('title', 'SHASHANK'); 
      var current_cordinate = jQuery(this).attr('coords').split(','); 
      var nextX = Math.ceil(current_cordinate[2]) + 1; 
      var NextY = Math.ceil(current_cordinate[3]); 
      var downX = Math.ceil(current_cordinate[2]) + 1; 
      var downY = Math.ceil(downX) + 1; 

      //var new_next_coordinate = jQuery(this).attr('coords', ('0,0,' + nextX + ',' + NextY)) 
      //alert(new_next_coordinate.text()); 
      jQuery(jQuery(this).find('coords','0,0,'+nextX+','+NextY)).attr('title', 'SHASHANK'); 
      alert("SUBMIT"); 
     }); 
    }); 
});