Editando apunte: SVG: Mapas con coordenadas relativas

Editando apunte: SVG: Mapas con coordenadas relativas cerrar apuntes

ID: 94 (tabla: apuntes) Título:
Fecha: [poner fecha actual ]
Categorías: Vicisitudes de un Webmaster, Programación, Caricaturas y caricaturistas
Etiquetas: accesibilidad, enlaces, etiquetas, imágenes, links, tags, webmaster
Extras: accesibilidad, enlaces, etiquetas, imágenes, links, tags, webmaster
apunte: - - - - - - - -

<p>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="300px" height="197px" viewbox="0 0 600 394" style="float: right; margin: 0 0 .5em 1em; border: 3px ridge gray;">
	<image x="0" y="0" width="600px" height="394px" xlink:href="diario.imagen.php?id=48&max=600" />
	<a xlink:href='http://www.caricaturasmarbella.com' xlink:title='caricaturas San Jorge'>
		<circle cx="231" cy="112" r="27" fill="transparent" stroke="gray" stroke-width="2" >
			<set attributeName='stroke' from='gray' to='red' begin='mouseover' end='mouseout'/>
		</circle>
	</a>
	<a xlink:href='http://www.sucaricatura.com' xlink:title='sucaricatura.com, su caricatura en Internet'>
		<circle cx="432" cy="225" r="27" fill="transparent" stroke="gray" stroke-width="2">
			<set attributeName='stroke' from='gray' to='red' begin='mouseover' end='mouseout'/>
		</circle>
	</a> 
</svg>
	[rss]En un tema de los foros del web: <a href="http://www.forosdelweb.com/f4/mapa-imagenes-con-cordenadas-relativas-1009619/">Mapa de imagenes con coordenadas relativas</a>, la única respuesta hasta ahora ha sido la mía recomendando el uso de imágenes svg.[/rss]
	[rss]Para justificar mi recomendación me propuse hacer un ejemplo, pero para no saturar de "Mapas de España" este diario he decidido usar otro viejo ejemplo: "<a href="?titulo=Rollover+en+mapa%3A+Creando+recortes+circulares&PHPSESSID=8lfq43div76o9n06ivvvhutm44">Rollover en mapa: Creando recortes circulares</a>".[/rss]
	A la derecha de este párrafo podemos ver una versión reducida del mismo mapa del citado apunte.
</p>
<p>
	A continuación insertamos el código del mapa en miniatura que tiene la mitad del tamaño del original (300x197), en donde mostramos el mismo área original con su enlace; y hemos añadido otra área con otro enlace de otro de los caricaturistas que aparecen en la foto de familia:
</p>
<pre class="codigo"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="300px" height="197px" viewbox="0 0 600 394">
	<image x="0" y="0" width="600px" height="394px" xlink:href="diario.imagen.php?id=48&max=600" />
	<a xlink:href='http://www.caricaturasmarbella.com' xlink:title='caricaturas San Jorge'>
		<circle cx="231" cy="112" r="27" fill="transparent" stroke="gray" stroke-width="2" >
			<set attributeName='stroke' from='gray' to='red' begin='mouseover' end='mouseout'/>
		</circle>
	</a>
	<a xlink:href='http://www.sucaricatura.com' xlink:title='sucaricatura.com, su caricatura en Internet'>
		<circle cx="432" cy="225" r="27" fill="transparent" stroke="gray" stroke-width="2">
			<set attributeName='stroke' from='gray' to='red' begin='mouseover' end='mouseout'/>
		</circle>
	</a> 
</svg></pre>
<p>
	Lo único que estamos usando por primera vez en nuestros apuntes relacionados con las imágenes "<a href="http://es.wikipedia.org/wiki/Scalable_Vector_Graphics">svg</a>" es la etiqueta "<a href="http://www.w3.org/TR/SVG/struct.html#ImageElement">image</a>".
</p>
<h3 class="subtitulo">
	SVG: etiqueta image
</h3>
<p>
	Esta etiqueta sirve para insertar una imagen en la posición especificada en los atributos x,y con las dimensiones width (ancho) y height (alto). Puede notarse la similitud con la etiqueta "<a href="http://www.w3.org/wiki/HTML/Elements/img">img</a>" en documentos "<a href="http://es.wikipedia.org/wiki/HTML">html</a>";
	en este caso no deben definirse etiquetas "<a href="http://www.w3.org/wiki/HTML/Elements/map">map</a>" ni sus "<a href="http://www.w3.org/wiki/HTML/Elements/area">areas</a>".
</p>

<h3 class="subtitulo">
	Atributo fill: none vs. transparent
</h3>
<p>
	La última curiosidad sobre los enlaces en las figuras (en este caso los círculos), es que si definimos la figura sin relleno (fill="none"), la zona caliente de esa figura tan solo es la línea del círculo, pero usando el valor "transparent", la zona caliente también es el interior de la figura.
</p>

<br/>
<p>
	[rss]Para poder comparar los resultados, a continuación mostramos el mismo "mapa" sin reducir.[/rss]
</p>
<div style="margin: 1em; text-align: center;">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="600px" height="394px" viewbox="0 0 600 394">
	<image x="0" y="0" width="600px" height="394px" xlink:href="diario.imagen.php?id=48&max=600" />
	<a xlink:href='http://www.caricaturasmarbella.com' xlink:title='caricaturas San Jorge'>
		<circle cx="231" cy="112" r="27" fill="transparent" stroke="gray" stroke-width="2" >
			<set attributeName='stroke' from='gray' to='red' begin='mouseover' end='mouseout'/>
		</circle>
	</a>
	<a xlink:href='http://www.sucaricatura.com' xlink:title='sucaricatura.com, su caricatura en Internet'>
		<circle cx="432" cy="225" r="27" fill="transparent" stroke="gray" stroke-width="2">
			<set attributeName='stroke' from='gray' to='red' begin='mouseover' end='mouseout'/>
		</circle>
	</a> 
</svg>

</div>

<p>
	[rss]Y si revisamos los códigos, la única deferencia entre ambos mapas se encuentra en los atributos width y height de las etiquetas svg.[/rss]
</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