CODEWITHSUNDEEP
javascriptjquery
Wazdesign
Wazdesign

Reputation: 83

Using coordinates values for position

I have following image map code.

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

I can retrieve attribute coords it return "213,109,320,256", for position div I want DIV position based on this co-ords. Like top value is 213 and left is 109px.

How I can retrieve each value and save it in local variable.

Upvotes: 1

Views: 178

Answers (3)

shashank kulshrestha
shashank kulshrestha

Reputation: 21

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

Upvotes: 0

dav1d
dav1d

Reputation: 6055

What Sirko posted isn't jQuery, so here the jQuery solution:

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

What you get is an array of integer: [213, 109, 320, 256]

Upvotes: 1

Sirko
Sirko

Reputation: 74036

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

This creates an array with all values of coords. You can then access the top value by coord[0] and the left value by coord[1].

Upvotes: 3

Related Questions