Adding dots to an image - beginner

Question

I have a URL like http://weburl/mine/dot.html?gid=4&x=266y=647&x=191y=355&x=100y=893

From the above URL. i need to draw dots on the screen by taking the x and y values.

According to the above example there are 3 such values.

x=266 y=647
x=191 y=355
x=100 y=893

There are 2 parts to this question:

1.) How can I break the values from the URL and put it to an array in order to construct the image? (Since there are multiple values for x in the above URL)

2.) How can I draw the dot on the image? fiddle added.

Note: Following is the CSS of the dot.

                position: 'absolute',
                top: ev.pageY + 'px',
                left: ev.pageX + 'px',
                width: '10px',
                height: '10px',
                background: '#000000'

Cheery · Accepted Answer · 2014-10-01T03:29:12.940

4

1)

// for str use window.location.search.replace("?", "");
var str = 'gid=4&x=266y=647&x=191y=355&x=100y=893';
var data = str.match(/(x|y)=(\d+)/g), pointsX = [], pointsY = [];
for(var i = 0; i < data.length; i++)
{
    var tmp = data[i].split('=');
    if (tmp[0] == 'x')
        pointsX.push(tmp[1]);
    else
        pointsY.push(tmp[1]);
}

2) place a div with background or border above the image or use html5 + canvas http://jsfiddle.net/dh0swt43/

var str = 'gid=4&x=20y=30&x=40y=50&x=100y=100';
var data = str.match(/(x|y)=(\d+)/g), pointsX = [], pointsY = [];
for(var i = 0; i < data.length; i++)
{
    var tmp = data[i].split('=');
    if (tmp[0] == 'x')
        pointsX.push(tmp[1]);
    else
        pointsY.push(tmp[1]);
}
for(var i = 0; i < pointsX.length; i++)
{
    var div = document.createElement('div');
    div.className = 'dot';
    div.style.left = pointsX[i] + 'px';
    div.style.top = pointsY[i] + 'px';
    document.getElementById('wrapper').appendChild(div);
}

.dot {
    height: 2px;
    width: 2px;
    position: absolute;
    border: 2px solid red;
    z-index: 10;
}

<div style='position:relative' id='wrapper'>
    <img src='http://bestclipartblog.com/clipart-pics/earth-clip-art-3.jpg'>
</div>

edited Oct 01 '14 at 03:29

answered Oct 01 '14 at 03:22

Cheery

16,063
42
57

I tried this on JSFiddle but it doesn't work. can you look into this . http://jsfiddle.net/8z388ooa/3/ – Illep Oct 01 '14 at 03:28
@Illep look at the link in my answer – Cheery Oct 01 '14 at 03:29
You can actually access the query parameters from the "location" object. I would highly recommend inspecting the object yourself in Chrome's JS console, but "location.search" will get you the query parameters. http://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript – Breedly Oct 01 '14 at 03:32
I am loading the image from the body tag. If so how can i do this. The dot doesn't draw there. – Illep Oct 01 '14 at 03:32
@Illep http://jsfiddle.net/8z388ooa/4/ with jQuery it can be written even in a shorter form – Cheery Oct 01 '14 at 03:37
How to change this part data = str.match(/(x|y)=(\d+)/g) ? i wanted to add another parameter, let say 'z' but i want the 'z' to be sting not number – Sam San Nov 24 '19 at 04:39
@JamVille like that, for example, `/(x|y|z)=(\d+|[^&]+)/g` – Cheery Nov 25 '19 at 18:33

Adding dots to an image - beginner

1 Answers1