How to add/alter a value of an attribute

Question

I have a picture that I use with a Area Map in html

I have added some bootstrap to the page, but long story short.

I would like to dynamically alter the coordinates of my areas based on the position of the picture after loading.
I get the position of the picture like this

var addLEFT = $("#body_hand_foot_image").position().left;
var addTOP = $("#body_hand_foot_image").position().top;

So from here I want to add the values of the two variables to the coordinates of the areas. Below is an example of one of those areas. They are all accurate of the picture is located at x=0 - y=0.

<area class="joint" alt="Front Right Neck" href="#" joint="R_Neck_front" full="Right Neck" shape="circle" coords="126,92,8" />

Any Ideas?

Final Solution after some help

function reconfCoords() {
    var items = $('#jointMap').find('area');
    items.each(function () {
        var c = $(this).attr('coords');
        var coords = c.split(',');

        coords[0] = (Number(coords[0]) + Number($("#body_hand_foot_image").position().left)).toString();
        coords[1] = (Number(coords[1]) + Number($("#body_hand_foot_image").position().top)).toString();
        $(this).attr('coords',coords.join());

        var a = $(this).attr('coords');
    });
    return true;
}

So, in summary, you want to split the contents of the coords attribute, parse the results as integers, add some value to them and serialize them back into the attribute? What are your problems with achieving this? — Frédéric Hamidi
– Frédéric Hamidi, Commented Jan 4, 2017 at 13:30
@FrédéricHamidi Well, Yes and Yes. and no idea how. But your comment gave me some clues, so I will go try it out. — morne
– morne, Commented Jan 4, 2017 at 13:32
Well, maybe approach every step one at a time -- extracting and splitting the values should be easy, as well as parsing strings into integers. You then have to determine how to add the values. I imagine addLEFT will be added to the x coords and addTOP to the y coords. The third coord (radius) can be left alone. Then join the values back as strings, which is not difficult either. If you get into trouble, search for information about the specific sub-problem you're solving. — Frédéric Hamidi
– Frédéric Hamidi, Commented Jan 4, 2017 at 13:36
@FrédéricHamidi If you are correct about the requirement then, this can achieve by var co = $('area').attr('coords').split(','); co[0]+addLeft; co[1]+addRight; $('area').attr('coords', co.join(',')) — Dipak Telangre
– Dipak Telangre, Commented Jan 4, 2017 at 13:42

Zorken17 · Accepted Answer · 2017-01-04 13:39:45Z

1

Try doing something like this:

var coords = $('area').attr('coords').split(',');

coords[0] = $("#body_hand_foot_image").position().left;
coords[1] = $("#body_hand_foot_image").position().top;

$('area').attr('coords',coords.join());

answered Jan 4, 2017 at 13:39

Zorken17

1,8861 gold badge12 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

drkibitz · Accepted Answer · 2017-01-04 13:36:08Z

1

Use $elem.attr() in jQuery to get and set an element attribute. Use Element.getAttribute() and Element.setAttribute() in vanilla HTML.

I assume you want to get the "coords" attribute, split the value on ",", add your values to [0] and [1] respectively, recreate the coord value by rejoining the array, then setting the attribute.

answered Jan 4, 2017 at 13:36

drkibitz

5175 silver badges15 bronze badges

Collectives™ on Stack Overflow

How to add/alter a value of an attribute

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related