logo El diario de Pepe Molina (Caricatos)

yo

En un tema de los foros del web: Mapa de imagenes con coordenadas relativas, la única respuesta hasta ahora ha sido la mía recomendando el uso de imágenes svg.

Última caricatura

IV Asamblea de la AEC: IV Asamblea General de la Asociación Española de Caricaturistas

IV Asamblea de la AEC

RSS de las imágenes: rss

La Cita

Deseamos ser más felices que los demás, y eso es dificilísimo, porque siempre les imaginamos mucho más felices de lo que son en realidad

Charles-Louis de Secondat Montesquieu, escritor y jurista francés (1689-1755).

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: Mapas con coordenadas relativas

emoticón de Caricatos Publicado el día 02 de septiembre de 2012
id=94; categorías: Vicisitudes de un Webmaster, Programación, Caricaturas y caricaturistas

En un tema de los foros del web: Mapa de imagenes con coordenadas relativas, la única respuesta hasta ahora ha sido la mía recomendando el uso de imágenes svg. 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: "Rollover en mapa: Creando recortes circulares". A la derecha de este párrafo podemos ver una versión reducida del mismo mapa del citado apunte.

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: 

<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>

Lo único que estamos usando por primera vez en nuestros apuntes relacionados con las imágenes "svg" es la etiqueta "image".

SVG: etiqueta image

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 "img" en documentos "html"; en este caso no deben definirse etiquetas "map" ni sus "areas".

Atributo fill: none vs. transparent

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.


Para poder comparar los resultados, a continuación mostramos el mismo "mapa" sin reducir.

Y si revisamos los códigos, la única deferencia entre ambos mapas se encuentra en los atributos width y height de las etiquetas svg.

Zona de comentarios

Este apunte aún no tiene comentarios.

Evaluación

Valoración de esta página: (apunte.94) 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 10486 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=75&amp;max=300
¡Felix Navidad!
¡Felix Navidad!
enlace a la postal
Copyright © 2002-2024 www.pepemolina.com
RSS rss | Ver Mapa del sitio