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 位置。像 top 值是 213 和 left 是 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");
        });
    });
});