Diferencia entre revisiones de «Ayuda:ImageMap»

De Wikipedia, la enciclopedia libre
Contenido eliminado Contenido añadido
Jmarchn (discusión · contribs.)
mSin resumen de edición
Jmarchn (discusión · contribs.)
Sin resumen de edición
Línea 358: Línea 358:
ImageMap no está pensado para contener un pie de imagen, para ello debemos incluir la imagen en una tabla. Por ejemplo:
ImageMap no está pensado para contener un pie de imagen, para ello debemos incluir la imagen en una tabla. Por ejemplo:
<pre>
<pre>
{|class="wikitable" width="250" align=left
{|class="wikitable" width="256" align=left
|<imagemap>
|<imagemap>
File:Eagle(owl)-eye.JPG|256px
File:Eagle(owl)-eye.JPG|250px
circle 1028 717 299 [[Córnea]]
circle 1028 717 299 [[Córnea]]
desc bottom-left
desc bottom-left
Línea 370: Línea 370:
</pre>
</pre>


{|class="wikitable" width="250" align=left
{|class="wikitable" width="256" align=left
|<imagemap>
|<imagemap>
File:Eagle(owl)-eye.JPG|256px
File:Eagle(owl)-eye.JPG|250px
circle 1028 717 299 [[Córnea]]
circle 1028 717 299 [[Córnea]]
desc bottom-left
desc bottom-left

Revisión del 18:46 23 ene 2020

América del NorteAmérica del SurEuropaÁfricaAsiaOceaníaAntártida

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

Ejemplo sencillo sin título

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

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

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.

<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

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

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

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

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


Alineación de la imagen

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>


Para situar la imagen en el centro de la pantalla se indica centrada como parámetro:

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

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


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

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

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


Formato

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.


<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

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.

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.
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.
RomboCí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.
RomboCírculoRectá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.

RomboCírculoRectángulo

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>

Haciéndolo fácil

Puede utilizar un accesorio, en Commons, que se llama ImageMapEdit, de Dario D. Müller (ImageMapEdit_Howto). Para utilizarlo es necesario situarse, obviamente, en Commons, activar ImageMapEdit (dejando marcada la casilla) de la página Accesorios de Preferencias, está al final del segundo grupo de accesorios.

Entonces debajo de cualquier imagen de Commons, aparece el enlace ImageMapEdit >, que activa el accesorio.

Veámoslo en el ejemplo de un ojo, en que seleccionaremos el área de la córnea con un círculo:

Área circular seleccionada de la córnea de un ojo, y asignado el enlace; siguiendo el ejemplo y según como se explica.

En este caso (puede clicar el enlace que sigue), después de abrir Eagle(owl)-eye.JPG en Commons, y una vez clicado ImageMapEdit >, aparecerá el accesorio con el código inicial escrito en el recuadro de abajo (Generated wikicode).

Clicaremos circle, situaremos el cursor en el centro del ojo clicaremos y una vez apartado el cursor del centro y posicionado en el borde de la córnea clicaremos con el botón derecho, con lo cual:

  1. Aparecerá una área circular en la imagen.
  2. Se habrá escrito en el recuadro de abajo (Generated wikicode) el código añadiendo:
circle 1028 717 299 [[]]

Añadiremos el enlace "Córnea". Con lo que tendremos:

<imagemap>
File:Eagle(owl)-eye.JPG|

circle 1028 717 299 [[Córnea]]

desc bottom-left
</imagemap>

Recordamos que se podrían añadir otras áreas y de otros tipos. El tipo más fácil de utilizar es el polígono (poly(gon)) y habitualmente el más difícil de ajustar es el círculo.

Copie el contenido de Generated wikicode al portapapeles. Luego pegamos, en el modo Editar código, el contenido del portapapeles en el artículo (ocasionalmente una plantilla, y en este caso en esta ayuda) de la Wikipedia, según convenga.

Añadimos en el código (<imagemap>...) de la imagen (ya copiado en el artículo) la anchura que nos parezca adecuada (en este caso hemos optado por 250px) en la línea del nombre del fichero, tal como se muestra:

<imagemap>
File:Eagle(owl)-eye.JPG|250px

circle 1028 717 299 [[Córnea]]

desc bottom-left
</imagemap>


Con lo que se obtiene:

Córnea

Intente pasar el cursor del ratón por encima de la córnea.


ImageMap no está pensado para contener un pie de imagen, para ello debemos incluir la imagen en una tabla. Por ejemplo:

{|class="wikitable" width="256" align=left 
|<imagemap>
File:Eagle(owl)-eye.JPG|250px
circle 1028 717 299 [[Córnea]]
desc bottom-left
</imagemap>
|-
| Clique con el cursor la córnea en la imagen del ojo del búho real.
|}
{{--}}
Córnea
Clique con el cursor la córnea en la imagen del ojo del búho real.


Véase también

Enlaces externos

mw:Extension:ImageMap