javascript - 位置の座標値の使用

Question

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

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

「213,109,320,256」を返す属性座標を取得できます。位置divの場合、この座標に基づいてDIV位置が必要です。同様に、上の値は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");
        });
    });
});