Editando apunte: SVG: más que mapas

Editando apunte: SVG: más que mapas cerrar apuntes

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

<p>
	[rss]Hemos usado el formato svg para crear mapas interactivos muy sencillos; ahora iremos ampliando las posibilidades de este formato.[/rss]
</p>
<p>
	En el apunte "<a href="?titulo=SVG%3A+Mapa+de+Espa%F1a&PHPSESSID=g0qq4icse7fsduh9mnq0ph1f21">SVG: Mapa de España</a>", mostramos un sencillo efecto rollover (imagen de sustitución), también utilizando el lenguaje XLink hemos creado enlaces y añadido títulos (igual que los mapas de imágenes); pero vamos a intentar añadir más vistosidad.
</p>

#efecto:hover #yo	{
	display: block;
}

#capital .estrellita{
display: none;
}

#capital:hover .estrellita{
display: block;
}

</style>

</a>

</g>
<g id="efecto">
<a xlink:href='diario.jocker.php?extra=info_hispano&provincia=M%E1laga' xlink:title='Málaga' class='normal'>
	<polygon id="Malaga" points='219,430,220,429,222,429,223,430,224,430,225,431,230,431,231,430,232,430,234,428,237,428,238,429,239,429,240,430,239,431,239,432,238,433,238,434,239,435,239,439,238,440,238,441,239,442,239,443,242,446,244,446,245,447,247,447,248,448,251,448,252,449,253,449,254,450,255,450,256,451,257,451,258,452,260,452,263,455,264,455,266,457,248,457,247,458,240,458,239,459,235,459,234,460,232,460,231,461,229,461,216,474,215,474,214,475,209,475,208,474,201,474,200,475,199,475,197,477,196,477,190,483,189,483,187,485,186,484,186,483,185,482,185,481,180,476,180,475,178,473,178,472,183,467,183,465,184,464,184,459,185,458,185,456,187,454,188,455,190,455,191,456,193,456,196,453,196,452,197,451,197,450,198,449,198,447,199,446,199,444,205,438,205,437,209,433,213,433,214,432,215,432,216,431,217,431,218,430' />
	<set attributeName='fill' from='transparent' to='blue' begin='mouseover' end='mouseout'/>
</a>
<image id="yo" x="28" y="440" width="80px" height="86px" xlink:href="dibujos/miemoticon.gif"/>

</g>

</svg>

<p>
	[rss]El efecto en la provincia de Málaga, no solo cambia el color de la provincia, también muestra un icono previamente ocultado con estilos.
	De la misma manera podríamos tener escondidos otros elementos salpicados por el resto del mapa.[/rss]
</p>
<p>
	Hemos reservado para la capital (con borde negro) una novedad en esta serie de apuntes, la inserción de elementos svg dentro de una imagen svg.
	Son cinco (5) estrellas que se ubicarán en la esquina superior derecha del dibujo.
</p>
<h3 class="subtitulo">
	Insertando estrellas
</h3>
<p>
	Nos ayudaremos del código que habíamos usado en el apunte <a href="?titulo=Generando+estrellas+svg&PHPSESSID=g0qq4icse7fsduh9mnq0ph1f21">Generando estrellas svg</a>.
	El código de la estrella de cinco (5) puntas lo hemos copiado e insertado dentro de nuestro mapa con distintas coordenadas y otro tamaño.
	Para poder ubicar la misma estrella, con los mismos puntos y dimensiones, pero en distintos sitios y un tamaño menor,
	hemos usado otros tantos elementos svg, tan solo variando la coordenada x.
</p>
<p>
	[rss]Por último, crearemos dinámicamente una provincia -Gerona-, y la enlazaremos al apunte sobre el Congreso que aconteció el año 2011.[/rss]
	Detallaremos esta inserción dinámica en un futuro apunte.
</p>

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