Se puede crear "areas" desde javascript? teniendo la información(coordenadas) guardadas en una base de datos?
1 respuesta
Sí se puede hacer. Tomé el ejemplo de <map>
para esta respuesta, agregando el área para JS
por medio de Javascript.
En este primer ejemplo, pasa el mouse sobre JS
, no hay área creada aún. Haz clic en el botón Agregar JS y vuelve a pasar el mouse sobre esa sección, ahora ya hay área.
function agregarJs() {
// Obtener mapa
let mapa = document.getElementById('mapa');
// Crear área y asignar atributos
let js = document.createElement('area');
// Aquí defines el tipo de forma
js.shape = 'poly';
js.coords = '130,147,200,107,130,4,59,107';
js.href = 'https://developer.mozilla.org/docs/Web/JavaScript';
js.target = '_blank';
// Agregar área al mapa
mapa.appendChild(js);
}
img {
display: block;
margin: 0 auto;
width: 260px;
height: 232px;
}
button {
display:block;
margin:10px auto;
}
<map name="infographic" id="mapa">
<area shape="poly" coords="130,147,200,107,254,219,130,228"
href="https://developer.mozilla.org/docs/Web/HTML"
target="_blank" alt="HTML" />
<area shape="poly" coords="130,147,130,228,6,219,59,107"
href="https://developer.mozilla.org/docs/Web/CSS"
target="_blank" alt="CSS" />
</map>
<img usemap="#infographic" src="https://interactive-examples.mdn.mozilla.net/media/examples/mdn-info2.png" alt="MDN infographic" />
<button onclick="agregarJs();">Agregar JS</button>
Puedes agregar el área al mapa al cargar la página:
// Suponiendo que obtuviste las coordenadas como JSON o arreglo
let coords = [130,147,200,107,130,4,59,107];
window.onload = function() {
// Obtener mapa
let mapa = document.getElementById('mapa');
// Crear área y asignar atributos
let js = document.createElement('area');
// Aquí defines el tipo de forma
js.shape = 'poly';
// Creas una cadena con las coordenadas, separando por comas
js.coords = coords.join(',');
js.href = 'https://developer.mozilla.org/docs/Web/JavaScript';
js.target = '_blank';
// Agregar área al mapa
mapa.appendChild(js);
}
img {
display: block;
margin: 0 auto;
width: 260px;
height: 232px;
}
<map name="infographic" id="mapa">
<area shape="poly" coords="130,147,200,107,254,219,130,228"
href="https://developer.mozilla.org/docs/Web/HTML"
target="_blank" alt="HTML" />
<area shape="poly" coords="130,147,130,228,6,219,59,107"
href="https://developer.mozilla.org/docs/Web/CSS"
target="_blank" alt="CSS" />
</map>
<img usemap="#infographic" src="https://interactive-examples.mdn.mozilla.net/media/examples/mdn-info2.png" alt="MDN infographic" />
element = document.createElement('div'); element.className = 'rectangle'; element.style.left = mouse.x + 'px'; element.style.top = mouse.y + 'px'; canvas.appendChild(element) console.log(document.documentElement.scrollTop); canvas.style.cursor = "crosshair";