Editando apunte: Mapas y formularios

Editando apunte: Mapas y formularios cerrar apuntes

ID: 148 (tabla: apuntes) Título:
Fecha: [poner fecha actual ]
Categorías: Vicisitudes de un Webmaster, Globalización, Programación
Etiquetas: diseño, imágenes, javascript, sociedad, webmaster
Extras: diseño, imágenes, javascript, sociedad, webmaster
apunte: - - - - - - - -

<p>
	[rss]A veces hay problemas de sencilla solución pero encontramos referencias demasiado complejas.[/rss]
Sin ir más lejos, en los Foros del web encontré <a href="http://www.forosdelweb.com/f13/mapa-registre-seleccion-formulario-1150191/">uno</a>
donde no he podido dar respuesta inmediata, pero voy a ponerme a ello.
</p>
<p>
	Usaremos el <a href="?titulo=Mapa+de+Espa%F1a&PHPSESSID=c6uge83chhdc9tavaqnn96mso4">mapa de España</a> que ya tenemos junto con su <a href="ficheros/provincias.txt?PHPSESSID=c6uge83chhdc9tavaqnn96mso4">listado de provincias y sus coordenadas</a>.
</p>
<p>
	Para contestar usaremos el mapa del apunte <a href="?titulo=SVG%3A+creaci%F3n+din%E1mica&PHPSESSID=c6uge83chhdc9tavaqnn96mso4">SVG: creación dinámica</a> y a su lado pondremos la lista de provincias en controles "checkbox" de un formulario.
</p>
<form style="border: 1px solid grey; padding: 5px; margin: 1em;"><input type="hidden" name="PHPSESSID" value="c6uge83chhdc9tavaqnn96mso4" />
<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: auto;"></div>
</fieldset>
</form>
<p style="clear: both;">
	El código está disponible en :<a href="diario.jocker.php?extra=codigo&codigo=script.mapa_y_form&PHPSESSID=c6uge83chhdc9tavaqnn96mso4">Extra: script.mapa_y_form</a>.
</p>
<h3 class="subtitulo">Paso a paso</h3>
<p>
	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:
</p>

<pre class="codigo">
<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>
</pre>
<p>
	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).
</p>
<p>
	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).
</p>

<div class="codigo">poli.addEventListener("click", sel_poli, false);</div>

<div class="codigo">control.addEventListener("change", sel_check, false);</div>

<p>
	Solo nos faltaba definir los sendos códigos:
</p>

<pre class="codigo">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);
}</pre>

Controles Otras tablas: imagenes, postales, categorias, etiquetas, extras - - (popup ) - que

Seleccionar nuevo apunte

categoria Nombre:
Controles Otras tablas: apuntes, imagenes, postales, etiquetas extras - - Seleccionar: categoria
Descripción: - - - - - - - -	Apuntes

extra Nombre:
Controles Otras tablas: apuntes, imagenes, postales, categorias etiquetas - - Seleccionar: extra
Descripción: - - - - - - - -	Apuntes

etiqueta Nombre:
Controles Otras tablas: apuntes, imagenes, postales, categorias extras - - Seleccionar: etiqueta
Descripción: - - - - - - - -	Apuntes

Editor del diario

Zona de comentarios

Evaluación