1

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

<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です。

各値を取得してローカル変数に保存する方法。

4

3 に答える 3

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

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

于 2012-05-07T12:19:23.663 に答える
1

Sirko が投稿したのは jQuery ではないため、ここに jQuery ソリューションを示します。

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

得られるのは整数の配列です。[213, 109, 320, 256]

于 2012-05-07T12:29:47.717 に答える
0
<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");
        });
    });
});
于 2012-08-23T19:33:55.330 に答える