Добавление точек на изображении - начинающий

Question

У меня есть URL-адрес, как http://weburl/mine/dot.html?gid=4&x=266y=647&x=191y=355&x=100y=893

Из выше URL. Мне нужно нарисовать точки на экране, приняв значения x и y.

В соответствии с приведенным выше примером есть 3 таких значения.

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

Есть 2 части в данном вопросе:

1.) Как я могу разбить значения из URL и поместить его в массив для построения изображения. (Поскольку в приведенном выше URL-адресе есть несколько значений для x)

2.) Как я могу нарисовать точку на изображении. fiddle added.

Примечание: следующая CSS точки.

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

Answer 1

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) поместить DIV с фона или границы над изображением или использования html5 + холст 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>