Descripción: Interactuación entre un mapa svg y un formulario con el mapa de españa svg de ejemplo.
A continuación mostramos los apuntes asociados a este extra:
// Descripción para sindicación:
/*
[rss]Interactuación entre un mapa svg y un formulario con el mapa de españa svg de ejemplo.[/rss]
*/
svgns = "http://www.w3.org/2000/svg";
xlinkns = "http://www.w3.org/1999/xlink";
poner_evento(window, "load", obtener_provincias);
provincias = [];
function obtener_provincias() {
ajax = objetoAjax();
ajax.open("get", "ficheros/provincias.php", true);
ajax.onreadystatechange = function() {
if (ajax.readyState == 4) {
resultado = ajax.responseXML;
polys = resultado.getElementsByTagName("polygon");
for (i = 0, total = polys.length; i < total; i++)
provincias.push({"provincia": polys[i].getAttribute("id"), "puntos": polys[i].getAttribute("points")});
suma_provincias()
}
}
ajax.send(null);
}
function suma_provincias() {
for (i= 0, total = provincias.length; i < total; i++) {
p = provincias[i];
provincia = p.provincia;
puntos = p.puntos;
titu = document.createElementNS(svgns, "a");
titu.setAttributeNS(xlinkns, "xlink:title", provincia);
poli = document.createElementNS(svgns, "polygon");
poli.setAttributeNS(null, "id", "area_" + provincia);
poli.setAttributeNS(null, "fill", "orange");
poli.setAttributeNS(null, "points", puntos);
//poli.setAttributeNS(null, "stroke", "black");
poli.setAttributeNS(null, "stroke-width", "2px");
poli.addEventListener("click", sel_poli, false);
titu.appendChild(poli);
tag("crear_mapa_din").appendChild(titu);
nuevo = document.createElement("label");
txt = document.createTextNode(provincia);
control = document.createElement("input");
control.type = "checkbox";
control.name = "provincias[]";
control.id = "ch_" + provincia;
control.value = provincia;
control.addEventListener("change", sel_check, false);
nuevo.appendChild(txt);
nuevo.appendChild(control);
document.getElementById("cheks_provincias").appendChild(nuevo);
if (i < (total - 1)) {
salto = document.createElement("br");
document.getElementById("cheks_provincias").appendChild(salto);
}
}
}
function sel_check() {
_ch_ = this.checked;
fi = (_ch_) ? "red" : "orange";
document.getElementById("area_" + this.value).setAttributeNS(null, "fill", fi);
}
function sel_poli() {
_id_ = this.id.substr(5);
ch = document.getElementById("ch_" + _id_);
_ch_ = ch.checked;
ch.checked = !_ch_;
fi = (_ch_) ? "orange" : "red";
this.setAttributeNS(null, "fill", fi);
}
Este código ha sido leído en 111 ocasiones.
Esta extra aún no tiene comentarios.
Valoración de esta página: (extra.script.mapa_y_form)
Listados: imágenes, categorías, etiquetas, extras | Anuarios: 2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018, 2019, 2020, 2021, 2022, 2023, 2024 | Otros enlaces: buscador