logoExtra: script.mapa_y_form

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:

Mapas y formularios
A veces hay problemas de sencilla solución pero encontramos referencias demasiado complejas.
// 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.

Zona de comentarios

Esta extra aún no tiene comentarios.

Evaluación

Valoración de esta página: (extra.script.mapa_y_form) valor

Valoración evaluar evaluar evaluar evaluar evaluar evaluar evaluar evaluar evaluar evaluar

Respuesta: Zona de mensajes (proceso de evaluación)

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