Ayuda:ImageMap

De Wikipedia, la enciclopedia libre
Saltar a: navegación, búsqueda
Continents vide couleurs.png América del Norte América del Sur Europa África Asia Oceanía Antártida
Acerca de esta imagen

Un ImageMap es un recurso que permite hacer clic en la imagen de un mapa. ImageMap es una lista de coordenadas de una imagen específica, cada zona de la imagen se asocia con un hipervínculo o enlace a un artículo relacionado (en contraste con un enlace de imagen normal, en el que toda la zona de la imagen se asocia a un solo destino). Por ejemplo, en un mapa del mundo puede tener siete continentes y un hipervínculo a cada uno con más información sobre cada continente. El propósito de ImageMap es proporcionar una manera fácil de conectar diversas partes de una imagen sin dividir la imagen en archivos de imágenes separadas.

Ejemplo de sintaxis[editar]

Ejemplo sencillo sin título[editar]

<imagemap>
archivo:Polig 05c.svg|150px
default [[Pentágono]]
</imagemap>
Polig 05c.svg
Acerca de esta imagen

El ejemplo sencillo anterior, no importa dónde se hace clic, enlaza a la página principal Pentágono, para obtener información acerca de la imagen, haga clic en el icono azul i.

Descripción de la sintaxis[editar]

El cuerpo de un mapa de imagen: ImageMap, esta entre las etiquetas:

<imagemap>

</imagemap>

La etiqueta de comienzo: <imagemap> , indica el comienzo del cuerpo de instrucciones y la etiqueta </imagemap> señala el final, el cuerpo intermedio tienen que ser instrucciones correctas según la sintaxis de ImageMap.

El cuerpo de ImageMap puede estar formado por:

Líneas en blanco.
Comentarios(comenzando por #).
Líneas de instrucciones.

Así podemos ver, que los comentarios no afectan al resultado, son notas para facilitar las posteriores ediciones. Las líneas en blanco no son tenidas en cuenta y las líneas de instrucciones configuran el mapa.

Polig 05c.svg
Acerca de esta imagen
<imagemap>
# Aquí comienza el cuerpo de ImageMap
# en la siguiente línea se especifica la imagen.
archivo:Polig 05c.svg|150px|derecha

default [[Pentágono]]
</imagemap>

Primera línea o cabecera de ImageMap[editar]

La primera línea de instrucciones, después de la etiqueta de inicio, se especifica la imagen a presentar, la imagen debe estar en el mismo formato que un enlace de imagen ordinaria MediaWiki, señalando el nombre y la extensión.

Despues de la imagen, se indican los distintos parámetros.

Tamaño de la imagen[editar]

La dimensión de la imagen se determina, señalando el ancho en pixeles, indicando el valor seguido de px.

<imagemap>
Archivo:Polig 05c.svg|150px

default [[Geometría]]
desc none
</imagemap>
Polig 05c.svg


Alineación de la imagen[editar]

La Alineación de la imagen en la pantalla, pudiendo situarla a la izquierda, por omisión:

<imagemap>
Archivo:Polig 05c.svg|150px|izquierda

default [[Geometría]]
desc none
</imagemap>
Polig 05c.svg


Para situar la imagen en el centro de la pantalla se indica centrada como parametro:

<imagemap>
Archivo:Polig 05c.svg|150px|centrada

default [[Geometría]]
desc none
</imagemap>
Polig 05c.svg


Para que la imagen quede en el lado derecho se indica derecha en la cabedera:

<imagemap>
Archivo:Polig 05c.svg|150px|derecha

default [[Geometría]]
desc none
</imagemap>
Polig 05c.svg


Formato[editar]

Se pueden indicar los siguientes parámetros de formato:

Figura geométrica
<imagemap>
Archivo:Polig 05c.svg|150px|thumb|Figura geométrica


</imagemap>

En el formato thumb, la imagen se sitúa a la derecha de la pantalla, en un rectángulo, con pie de imagen si se ha añadido un texto y un icono, doble rectángulo, a la derecha abajo que acede a las características de la figura representada, se desactiva la instrucción desc.

Polig 05c.svg
Acerca de esta imagen
<imagemap>
Archivo:Polig 05c.svg|150px|derecha|borde

default [[Geometría]]
</imagemap>

El parámetro de formato borde, añade un rectángulo de color gris a la imagen, la posición de la imagen y la instrucción desc serán la especificada, no se presenta el texto de pie de imagen.

Partes del mapa[editar]

Ayuda ImageMap 01.svg

Las otras líneas se dividen en fichas, separadas por espacios en blanco. La función de cada línea se determina por la primera palabra en la línea. Todas las coordenadas corresponden con la imagen a su tamaño original, no al tamaño la imagen presentada. Las coordenadas, se debe especificar, horizontalmente la distancia desde el borde izquierdo (número de píxeles horizontales), y verticalmente la distancia desde la parte superior (número de píxeles verticales).

Como ejemplo tomaremos una imagen de 300px de ancho y 200px de alto, para ilustrar el ejemplo, en la imagen se han representado las coordenada, con centro de referencia en la esquina superior izquierda, las coordenadas de un punto se señalan primero la horizontal, eje x, y después la vertical, eje y.


Ayuda ImageMap 02.svg

En la imagen podemos ver los pares ordenados (x,y), de las coordenadas de los puntos, siendo el punto (0,0), la esquina superior derecha, en la figura se pueden ver los puntos: (50,50); (60,90); (100,150); (200,70); (250,180) y su posición en la pantalla.


  • poly
Un polígono. Dado por las coordenadas de sus vértices, seguida de un enlace entre corchetes.
Los polígonos deben definirse antes de cualquier otra forma.
Ayuda ImageMap 03.svg Rombo

En la figura tenemos un Rombo, que tomaremos como ejemplo de polígono de vértices a(25,75), b(70,15), c(145,15) y d(140,140), añadiendo estos datos tendremos que poniendo el cursor sobre el polígono así definido aparecerá el nombre del archivo referenciado y haciendo clip sobre el accederemos a este articulo.

<imagemap>
Archivo:Ayuda ImageMap 03.svg|300px|derecha
poly 25 75 70 15 145 15 75 75 [[Rombo]]

default [[Geometría]]
desc none
</imagemap>
  • circle
Un círculo. Los dos primeros parámetros son las coordenadas del centro, el tercero es el radio. Las coordenadas están seguidas por un enlace entre corchetes.
Ayuda ImageMap 04.svg Rombo Círculo

El Círculo de color azul de centro C(140,140) y de radio r(50), lo podemos añadir al mapa, del siguiente modo:

<imagemap>
Archivo:Ayuda ImageMap 04.svg|300px|derecha
poly 40 60 90 30 140 60 90 90 [[Rombo]]
circle 140 140 50 [[Círculo]]

default [[Geometría]]
desc none
</imagemap>
  • rect
Un rectángulo. Las coordenadas son las esquinas superior izquierda e inferior derecha, seguido del enlace asociado entre corchetes.
Ayuda ImageMap 05.svg Rombo Círculo Rectángulo

En la figura también podemos ver un Rectángulo de color verde, de vértice superior izquierdo e(200,25) é inferior derecho f(275,85), estos dos vértices definen el rectángulo

<imagemap>
Archivo:Ayuda ImageMap 05.svg|300px|derecha
poly 40 60 90 30 140 60 90 90 [[Rombo]]
circle 140 140 50 [[Círculo]]
rect 200 25 275 85 [[Rectángulo]]

default [[Geometría]]
desc none
</imagemap>
  • default
Es el enlace por omisión, el asociado a las zonas del mapa en las que no se ha especificado otro enlace.
  • desc
Especifica la posición del icono de referencia de la imagen. Puede ser:
top-right: superior derecha,
bottom-right: inferior derecha,
bottom-left: abajo a la izquierda,
top-left: superior izquierda,
none: ninguno.

Por omisión se sitúa en: bottom-right: inferior derecha.

Ayuda ImageMap 06.svg Rombo Círculo Rectángulo
Acerca de esta imagen

El icono de referencia es una i blanca en un circulo azul que enlaza con la imagen del mapa y su descripción. Este parámetro se omite para thumb dado que en lugar del icono presenta el habitual doble rectángulo.

Así podemos ver un ejemplo con una imagen sin representar las coordenadas de los puntos, y con el valor desc bottom-left.

<imagemap>
Archivo:Ayuda ImageMap 06.svg|300px|derecha|borde
poly 40 60 90 30 140 60 90 90 [[Rombo]]
circle 140 140 50 [[Círculo]]
rect 200 25 275 85 [[Rectángulo]]

default [[Geometría]]
desc bottom-left
</imagemap>

Véase también[editar]

Enlaces externos[editar]

mw:Extension:ImageMap