logo El diario de Pepe Molina (Caricatos)

yo

A veces hay problemas de sencilla solución pero encontramos referencias demasiado complejas.


Última caricatura

Andrés Iniesta: Futbolista español. En la actualidad juega en el Barcelona.

Andrés Iniesta

RSS de las imágenes: rss


La Cita

Todas las cosas son en sí contradictorias

Georg Wilhelm Friedrich Hegel, filósofo alemán (1770-1831).


En esta zona están las páginas personales del autor.


Mis clientes ahora también son mis amigos (aunque les cobre).


En Mis amigos Informáticos hay una pequeña colección de páginas de colegas webmasters..


En Mis amigos artistas podemos encontrar artistas de cualquier índole (dibujantes, pintores, escritores...)


Las recomendaciones que proponemos son de índole variada.


Aquí un cajón de sastre de enlaces.


Nos referencian desde sitios de toda índole.


Puede contribuir a mantener esta página con su donativo.


botón pay-pal

Mapas y formularios

emoticón de Caricatos Publicado el día 09 de abril de 2016
id=148; categorías: Vicisitudes de un Webmaster, Globalización, Programación

A veces hay problemas de sencilla solución pero encontramos referencias demasiado complejas. Sin ir más lejos, en los Foros del web encontré uno donde no he podido dar respuesta inmediata, pero voy a ponerme a ello.

Usaremos el mapa de España que ya tenemos junto con su listado de provincias y sus coordenadas.

Para contestar usaremos el mapa del apunte SVG: creación dinámica y a su lado pondremos la lista de provincias en controles "checkbox" de un formulario.

Provincias visitadas

El código está disponible en :Extra: script.mapa_y_form.

Paso a paso

Primero tenemos que tener el mapa, pero en este caso vamos a generarlo dinámicamente a partir de una lista con los nombres de provincias junto con sus coordenadas; con los nombres también crearemos la lista del formulario. Este es el código inicial:

<form style="border: 1px solid grey; padding: 5px; margin: 1em;">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0" y="0" width="312px" height="286px" preserveAspectRatio="none" viewBox="0 0 625 571"
style="margin: 0 0 .5em 1em; float: right; border: 3px ridge green; width: 322px; height: 296px;">
<style type="text/css">
svg #crear_mapa_din polygon	{
	stroke: black;
}
svg #crear_mapa_din polygon:hover:hover	{
	stroke: lime;
}
</style>

<polygon fill="#660000" points="175,534,175,535,178,538,179,538,181,540,182,540,184,542,186,542,187,543,188,543,189,544,190,544,191,545,192,545,193,546,195,546,196,547,197,547,198,548,199,548,200,549,201,549,203,551,204,551,205,552,206,552,207,553,208,553,209,554,210,554,212,556,213,556,214,557,215,557,216,558,217,558,219,560,220,560,221,561,222,561,223,562,225,562,226,563,228,563,229,564,231,564,232,565,237,565,238,564,241,564,242,563,244,563,245,562,247,562,248,561,249,561,250,560,251,560,252,559,253,559,254,558,261,558,262,559,281,559,282,558,285,558,286,557,289,557,290,556,291,556,292,555,294,555,295,554,296,554,297,553,308,553,309,552,311,552,312,551,314,551,315,550,317,550,318,549,319,549,320,548,326,548,327,549,329,549,330,550,332,550,333,551,335,551,336,552,337,552,338,553,340,553,341,554,342,554,343,555,344,555,346,557,347,557,348,558,349,558,350,559,351,559,352,560,353,560,354,561,355,561,356,562,358,562,359,563,360,563,361,564,363,564,364,565,366,565,367,566,369,566,370,567,372,567,373,568,376,568,111,568,112,567,112,565,114,563,114,562,115,561,115,560,116,559,116,558,117,557,117,556,118,555,118,554,120,552,120,551,121,550,121,549,123,547,123,546,125,544,125,543,128,540,129,540,131,538,132,538,133,537,134,537,135,536,136,536,137,535,138,535,139,534,142,534,143,533,144,533,145,532,147,532,148,531,149,531,150,530,152,530,153,529,154,529,155,528,156,528,157,527,159,527,160,526,162,526,163,525,164,525,165,526,167,526" />
<g id="crear_mapa_din"></g>
</svg>
<fieldset>
<legend>Provincias visitadas</legend>
<div id="cheks_provincias" style="height: 266px; overflow-y: scroll;"></div>
</fieldset>
</form>

En el código de la imagen svg, encontramos un polígono con las coordenadas de África y una etiqueta "g" sin contenido, que nos servirá para añadir las provincias, y en el formulario, en un elemento "fieldset" añadiremos los controles de selección (checkbox).

A cada provincia se le añade un manejador de eventos. En el caso de los polígonos se programa el evento click, y a los controles del formulario el cambio (change).

poli.addEventListener("click", sel_poli, false);
control.addEventListener("change", sel_check, false);

Solo nos faltaba definir los sendos códigos:

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);
}

Zona de comentarios

Este apunte aún no tiene comentarios.

Evaluación

Valoración de esta página: (apunte.148) valor

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

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

Historial de navegación

Esta página ha sido visitada en 6101 ocasiones


Disponemos de rss sindicar

Y del Mapa del sitio, además del sitemap.xml.


Aquí podemos encontrar los apuntes más visitados.

"Top 10" reemplaza a la sección Últimos apuntes.


Una buena forma de buscar un apunte es a partir de su categoría.


También es posible buscar apuntes por medio de las etiquetas (tags).


Hemos decidido poner al alcance de todos algunos comodines.

Adjuntamos una versión reducida del "buscador interno" que vemos en la lista anterior:

Buscar en apuntes

También estamos recopilando antiguas páginas del sitio.


Desde este recuadro se puede hacer una búsqueda cronológica.


Se puede crear una postal nueva desde el enlace del sector "Otras páginas del dominio", o editar la que sale en el recuadro, pulsando sobre ella..

http://www.pepemolina.com/postales/Fondos/santa.gif
http://www.pepemolina.com/postales/animales/gato8t.gif
Feliz Navidad
Feliz Navidad
enlace a la postal
Copyright © 2002-2017 www.pepemolina.com
RSS rss | Ver Mapa del sitio