I have code that draws points in an image based on my select options. Each point is related to a select and so I would like to know how by a caption with the name of each select in the point, or rather, the acronym to identify each point.
<li class="active"><a href="#"><label class="filter-label" >Pontos</label><select id = "pointsId" style="width: 80%; color:black">
<option selected>Selecione</option>
<option>Básio (Ba)</option>
<option>Sela (S)</option>
<option>Násio (N)</option>
<option>Espinha nasal anterior (ENA)</option>
<option>Espinha nasal posterior (ENP)</option>
<option>Ponto A (subespinhal)</option>
<option>Ponto B (pupramental)</option>
<option>Próstil (Pr)</option>
<option>Infradental (Id)</option>
<option>Pogônio (Pog)</option>
<option>Gnátio (Gn)</option>
<option>Mento (Me)</option>
<option>Ponto D (D)</option>
<option>Bolton (Bo)</option>
<option>Articular (Ar)</option>
<option>Pório (Po)</option>
</select></a></li>
O js:
function coordenadas(event) {
var selectedIndex = document.getElementById("pointsId").selectedIndex;
var currentPoint =
document.getElementById("pointsId").options[selectedIndex].text;
if (currentPoint != "Selecione") {
x = event.pageX;
y = event.pageY;
saveX = x;
saveY = y;
var div = document.getElementById('image');
if (!global_points[currentPoint]) {
global_points[currentPoint] = new Array();
}
global_points[currentPoint].X = x;
global_points[currentPoint].Y = y;
if (global_points[currentPoint].htmlPoint) {
global_points[currentPoint].htmlPoint.outerHTML = ''; /*erase the
point*/
global_points[currentPoint].htmlPoint = null;
}
var pto = document.querySelector('#image .ponto');
var ponto = document.createElement("span");
global_points[currentPoint].htmlPoint = ponto;
ponto.setAttribute("class", "ponto");
div.style.position = "relative";
var imgOfLf = $("#image").offset().left;
var imgOfTp = $("#image").offset().top;
ponto.style.cssText = "top: " + Math.floor(parseInt(y) - imgOfTp - 2.5)
+ "px; left: " + Math.floor(parseInt(x) - imgOfLf - 2.5) + "px;";
div.appendChild(ponto); // crio o ponto
var data_json = toJSON(global_points);
var hiddenForm = document.getElementById("saved_points");
hiddenForm.setAttribute("value", data_json);
}
}
CSS:
.ponto{
width: 6px;
height: 6px;
border-radius: 50%;
background-color: #FF0000;
position: absolute;
}
#image{
position: relative;
}