Diferencia entre revisiones de «Ayuda:ImageMap»

8028 bytes añadidos ,  hace 10 años
m
Revertidos los cambios de 190.161.173.240 (disc.) a la última edición de Renegade Monster
m (Revertidos los cambios de 190.161.173.240 (disc.) a la última edición de Renegade Monster)
 
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 articulo 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 ===
<pre style="overflow:auto">
<imagemap>
archivo:Polig 05c.svg|150px
default [[Pentágono]]
</imagemap>
</pre>
 
<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 ==
</imagemap>
</pre>
 
=== 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 pixeles, indicando el valor seguido de px.
<pre style="overflow:auto">
<imagemap>
Archivo:Polig 05c.svg|150px
 
default [[Geometría]]
desc none
</imagemap>
</pre>
 
<imagemap>
Archivo:Polig 05c.svg|150px
 
default [[Geometría]]
desc none
</imagemap>
<br clear=all>
 
==== Alineación de la imagen ====
La Alineación de la imagen en la pantalla, pudiendo situarla a la '''izquierda''', por omisión:
<pre style="overflow:auto">
<imagemap>
Archivo:Polig 05c.svg|150px|izquierda
 
default [[Geometría]]
desc none
</imagemap>
</pre>
 
<imagemap>
Archivo:Polig 05c.svg|150px|izquierda
 
default [[Geometría]]
desc none
</imagemap>
<br clear=all>
 
Para situar la imagen en el centro de la pantalla se indica '''centrada''' como parametro:
<pre style="overflow:auto">
<imagemap>
Archivo:Polig 05c.svg|150px|centrada
 
default [[Geometría]]
desc none
</imagemap>
</pre>
 
<imagemap>
Archivo:Polig 05c.svg|150px|centrada
 
default [[Geometría]]
desc none
</imagemap>
<br clear=all>
 
Para que la imagen quede en el lado derecho se indica '''derecha''' en la cabedera:
<pre style="overflow:auto">
<imagemap>
Archivo:Polig 05c.svg|150px|derecha
 
default [[Geometría]]
desc none
</imagemap>
</pre>
 
<imagemap>
Archivo:Polig 05c.svg|150px|derecha
 
default [[Geometría]]
desc none
</imagemap>
<br clear=all>
 
==== Formato ====
Se pueden indicar los siguientes parámetros de formato:
 
<imagemap>
Archivo:Polig 05c.svg|150px|thumb|Figura geométrica
 
default [[Geometría]]
</imagemap>
 
<pre style="overflow:auto">
<imagemap>
Archivo:Polig 05c.svg|150px|thumb|Figura geométrica
 
default [[Geometría]]
</imagemap>
</pre>
 
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'''.
<br clear=all>
 
<imagemap>
Archivo:Polig 05c.svg|150px|derecha|borde
 
default [[Geometría]]
</imagemap>
 
<pre style="overflow:auto">
<imagemap>
Archivo:Polig 05c.svg|150px|derecha|borde
 
default [[Geometría]]
</imagemap>
</pre>
 
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.
<br clear=all>
 
=== 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 el primer 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.
 
* '''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.
 
<imagemap>
Archivo:Ayuda ImageMap 001.svg|300px|derecha
poly 40 60 90 30 140 60 90 90 [[Rombo]]
 
default [[Geometría]]
desc none
</imagemap>
 
En la figura tenemos un [[Rombo]], que tomaremos como ejemplo de polígono de vértices '''a'''(40,60), '''b'''(90,30), '''c'''(140,60) y '''d'''(90,90), 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.
<pre style="overflow:auto">
<imagemap>
Archivo:Ayuda ImageMap 001.svg|300px|derecha
poly 40 60 90 30 140 60 90 90 [[Rombo]]
 
default [[Geometría]]
desc none
</imagemap>
</pre>
 
* '''rect'''
: Un rectángulo. Las coordenadas son las esquinas superior izquierda e inferior derecha, seguido del enlace asociado entre corchetes.
 
<imagemap>
Archivo:Ayuda ImageMap 001.svg|300px|derecha
poly 40 60 90 30 140 60 90 90 [[Rombo]]
rect 220 90 290 140 [[Rectángulo]]
 
default [[Geometría]]
desc none
</imagemap>
 
En la figura también podemos ver un [[Rectángulo]] de color verde, de vértice superior izquierdo '''e'''(220,90) é inferior derecho '''f'''(290,140), estos dos vértices definen el rectángulo
<pre style="overflow:auto">
<imagemap>
Archivo:Ayuda ImageMap 001.svg|300px|derecha
poly 40 60 90 30 140 60 90 90 [[Rombo]]
rect 220 90 290 140 [[Rectángulo]]
 
default [[Geometría]]
desc none
</imagemap>
</pre>
 
* '''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.
 
<imagemap>
Archivo:Ayuda ImageMap 001.svg|300px|derecha
poly 40 60 90 30 140 60 90 90 [[Rombo]]
rect 220 90 290 140 [[Rectángulo]]
circle 140 140 50 [[Círculo]]
 
default [[Geometría]]
desc none
</imagemap>
 
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:
<pre style="overflow:auto">
<imagemap>
Archivo:Ayuda ImageMap 001.svg|300px|derecha
poly 40 60 90 30 140 60 90 90 [[Rombo]]
rect 220 90 290 140 [[Rectángulo]]
circle 140 140 50 [[Círculo]]
 
default [[Geometría]]
desc none
</imagemap>
</pre>
 
* '''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.
<imagemap>
Archivo:Ayuda ImageMap 002.svg|300px|derecha|borde
poly 40 60 90 30 140 60 90 90 [[Rombo]]
rect 220 90 290 140 [[Rectángulo]]
circle 140 140 50 [[Círculo]]
 
default [[Geometría]]
desc top-right
</imagemap>
 
El icono de referencia es una '''i''' azul en un circulo 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 top-right'''.
 
<pre style="overflow:auto">
<imagemap>
Archivo:Ayuda ImageMap 002.svg|300px|derecha|borde
poly 40 60 90 30 140 60 90 90 [[Rombo]]
rect 220 90 290 140 [[Rectángulo]]
circle 140 140 50 [[Círculo]]
 
default [[Geometría]]
desc top-right
</imagemap>
</pre>
 
== Véase también ==
* [[Ayuda:Imágenes]]
* [[Wikipedia:Plantillas de navegación]]
 
== Enlaces externos ==
: [[mw:Extension:ImageMap]]
 
[[Categoría:Ayuda:Editando Wikipedia]]
 
[[de:Verweissensitive Grafik]]
[[en:Image map]]
[[eo:Klakebla mapo]]
[[it:Mappa immagine]]
[[nl:Image map]]
[[pl:Image map]]
[[pt:Image map]]
[[ru:Карта изображений]]
37 622

ediciones