CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Illep
Illep

Reputation: 16851

Adding dots to an image - beginner

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'

Upvotes: 2

Views: 2845

Answers (1)

Cheery
Cheery

Reputation: 16214

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>

Upvotes: 4

Related Questions