logo El diario de Pepe Molina (Caricatos)

yo

A partir de las coordenadas que ya hemos obtenido de las provincias de España, trataremos de generar el mapa de España en formato svg.


Ú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

No puede haber gracia donde no hay discreción

Miguel de Cervantes Saavedra, escritor español (1547-1616).


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

SVG: Mapa de España

emoticón de Caricatos Publicado el día 01 de julio de 2012
id=90; categorías: Así se hizo, Vicisitudes de un Webmaster, Programación

A partir de las coordenadas que ya hemos obtenido de las provincias de España, trataremos de generar el mapa de España en formato svg.

Para obtener el mapa que mostramos a continuación...

Hemos copiado del apunte :"Mapa de España", el array de las áreas de provincias que puede verse en su sección script: script.mapa_hispano, y luego hemos creado los polígonos con un sencillo bucle:

for (i in areas) {
	area = "<a xlink:href='http://es.wikipedia.org/wiki/" + i + "' xlink:title='" + i + "'>";
	area += "\n\t<polygon fill='#00FF00' points='" + areas[i].coors + "'>";
	area += "\n\t\t<set attributeName='fill' from='#00FF00' to='#FF0000' begin='mouseover' end='mouseout'/>";
	area += "\n\t\t<set attributeName='stroke' from='#00FF00' to='#000000' begin='mouseover' end='mouseout'/>";
	area += "\n\t</polygon>\n</a>\n";
	tag("textarea_mapa").value += area;
}

Nótese el efecto rollover cuyo funcionamiento lo hemos visto en este artículo: "Add interactivity to your SVG", aunque no funcione en todos los navegadores.

Formentera

Esta pequeña isla balear nos sirve de referencia para mostrar su código, simplemente por tratarse de la figura con menos coordenadas por ser de menor dimensión.

<a xlink:href='http://es.wikipedia.org/wiki/Formentera' xlink:title='Formentera'>
	<polygon fill='#00FF00' points='532,315,531,316,530,315,530,312,531,312,532,313'>
		<set attributeName='fill' from='#00FF00' to='#FF0000' begin='mouseover' end='mouseout'/>
		<set attributeName='stroke' from='#00FF00' to='#000000' begin='mouseover' end='mouseout'/>
	</polygon>
</a>

A diferencia del apunte anterior: SVG: Preliminares, dentro de la etiqueta polygon, que representa la figura poligonal de la isla, destacamos la forma de obtener el efecto rollover. También es de destacar la forma de enlazar de cada área.

Zona de comentarios

Hemos encontrado 1 comentarios.

#Mensaje enviado por Anónimo
Comentario escrito el día 06 de septiembre de 2014, a la hora 11:15:46

excelente, gracias!

Evaluación

Valoración de esta página: (apunte.90) 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 7239 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..

../diario.imagen.php?id=2&max=480
enlace a la postal
Copyright © 2002-2017 www.pepemolina.com
RSS rss | Ver Mapa del sitio