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");
        });
    });
});

使用位置的坐标值

3 个答案: