Extensión:ImageMap (imagen interactiva)

La extensión ImageMap permite crear imágenes interactivas pulsables con el ratón. Una imagen interactiva es una lista de coordenadas sobre una imagen concreta que permite añadir hiperenlaces en áreas de la imagen que apunten a varios destinos (a diferencia de un enlace de imagen normal, en el cual toda la imagen apunta a un mismo destino). Por ejemplo, un mapamundi podría tener cada país enlazado separadamente para brindar información adicional de cada uno de ellos. Las imágenes interactivas brindan una manera sencilla de enlazar varias partes de una imagen sin tener que dividir el archivo en varios.

• Descarga y mueve la carpeta ImageMap extraída a tu directorio extensions/.
  Los desarrolladores y contribuidores de código deberían instalar la extensión desde Git en su lugar, usando:

  cdextensions/
  gitclonehttps://gerrit.wikimedia.org/r/mediawiki/extensions/ImageMap
  

• Añade el siguiente código en la parte final de tu archivo LocalSettings.php :

  wfLoadExtension( 'ImageMap' );
  

• Yes Hecho – Navega a Special:Version en el wiki para verificar que la extensión se haya instalado correctamente.

Resolución de problemas

Hay que cerciorarse de que las cargas e ImageMagick estén instalados:

$wgEnableUploads = true;
$wgUseImageMagick = true;
$wgImageMagickConvertCommand = "/usr/bin/convert";

1. Compruebe si el paquete php-dom requerido está instalado.
2. Compruebe si está instalada la extensión ImageMagick , ya que esta extensión utiliza /usr/bin/convert para cambiar el tamaño de las imágenes. Si no está presente, es posible que aparezca una página con solo errores XML (consejo: utiliza el botón «Atrás» del navegador, ya que aún puedes editar la página)
3. En el alojamiento compartido de OVH, $wgUseImageMagick debería ser como: $wgUseImageMagick=false;

También puedes instalar esta extensión utilizando la compatibilidad integrada con Composer .

composer require mediawiki/image-map @dev

<imagemap>
File:Example2.png|150px|alt=Alternativa textual
default [[Main Page|Ir a la página principal]]
</imagemap>

El ejemplo anterior enlaza siempre a la Main Page, sin importar dónde se pulse. Para obtener información relativa a la imagen, debe pulsarse en el icono «i» azul 1ドル. Para obtener más información sobre la imagen, haz clic en el icono azul con la «i» . Otra manera de crear esta imagen con enlace sin utilizar esta extensión es [[File:Example2.png|150px|alt=Alternativa textual|title=Ir a la página principal|link=Main Page]]

<imagemap>
File:Example2.png|thumb|upright=0.5|center|alt=Otro texto|Diagram
default [[Main Page|Ve a la página principal]]
</imagemap>

En este ejemplo, se utiliza upright —que requiere thumb o frameless— en lugar de un tamaño de píxel fijo. La imagen se muestra al 50 % del tamaño de miniatura seleccionado por el lector (en Preferencias).

Este ejemplo muestra una miniatura con las dimensiones (anchura ×ばつ altura) 500 ×ばつ 250 píxeles; la imagen original es de 9600 ×ばつ 4800 píxeles. Las coordenadas de cada uno de los vértices se indican en píxeles y representan un punto en la imagen original. Así, por ejemplo, los vértices del polígono que rodea a «Judas» (el segundo por la derecha en la imagen) tienen coordenadas horizontales (medidas en píxeles desde la izquierda) que oscilan entre 7904 – 8635 y coordenadas verticales (medidas en píxeles desde la parte superior) que oscilan entre 2096 – 3260, que se encuentran muy fuera del rango de la miniatura mostrada de 500 ×ばつ 250, pero dentro del rango de la imagen original de 9.600 ×ばつ 4.800. Observe que uno de los vértices del polígono que rodea a «Simón» (a la derecha de la imagen), en concreto el vértice con la coordenada 9625 3301, se sitúa fuera de los límites de la imagen original de 9600 ×ばつ 4800.

<imagemap>
File:The Last Supper - Leonardo Da Vinci - High Resolution 32x16.jpg|thumb|center|500px|alt=''La última cena'' de Leonardo da Vinci. Imagen pulsable|Ejemplo de una imagen interactiva. Al pulsar sobre una persona de la imagen, el navegador carga el artículo apropiado.
poly 550 2550 750 2400 1150 2300 1150 2150 1200 2075 1500 2125 1525 2300 1350 2800 1450 3000 1700 3300 1300 3475 650 3500 550 3300 450 3000 [[w:Bartholomew the Apostle|Bartholomew]] 
poly 1575 2300 1625 2150 1900 2150 1925 2500 1875 2600 1800 2750 1600 3250 1425 3100 1400 2800 1375 2600 [[w:James, son of Alphaeus|James Minor]]
poly 1960 2150 2200 2150 2350 2500 2450 2575 2375 2725 2375 2900 2225 3100 2225 3225 1600 3225 1825 2700 1975 2450 1925 2300 [[w:Saint Andrew|Andrew]]
poly 2450 2575 2775 2500 2700 2650 2800 2700 2600 3000 2600 3250 2300 3250 2200 3200 2300 3000 [[w:Saint Peter|Peter]]
poly 2750 2500 2950 2400 3125 2600 3175 2700 3300 2850 3700 3200 3750 3200 3650 3350 3400 3200 3000 3350 2600 3325 2750 2800 2900 2700 2700 2650 [[w:Judas Iscariot|Judas]]
poly 3000 2350 3300 2350 3350 2660 3560 2600 3565 2690 3250 2800 3125 2575 [[w:Saint Peter|Peter]] 
poly 3332 2338 3528 2240 4284 3024 4074 3332 3864 3290 3780 3150 3668 3192 3598 3024 3374 2870 3388 2772 3542 2800 3668 2702 3542 2590 3430 2604 3350 2600 3300 2500[[w:John the Apostle|John]]
poly 4775 2184 4915 2128 5055 2212 5083 2352 5111 2464 5181 2604 5307 2744 5573 3052 5615 3192 5657 3290 5573 3402 5461 3332 5335 3248 4495 3248 4439 3388 4243 3388 4075 3360 4173 3136 4327 3010 4509 2730 4663 2520 4733 2394 [[w:Jesus]]
poly 5900 2100 5900 2150 5800 2400 5800 2500 5675 2589 5480 2671 5438 2507 5425 2301 5589 2452 5630 2301 5650 2100 [[w:Thomas the Apostle|Thomas]]
poly 5918 2150 6041 2109 6137 2246 6192 2411 6110 2589 6110 2726 6192 2822 6302 2740 6589 3109 5658 3178 5575 2918 5300 2698 5233 2589 5274 2438 5370 2507 5521 2685 5617 2671 5712 2575 5822 2507 5808 2287 5822 2175 [[w:James, son of Zebedee|James Greater]]
poly 6137 2013 6439 2013 6863 2260 7110 2515 6726 2675 6507 2548 6425 2630 6356 2753 6548 2849 6699 2781 7082 2794 7178 3109 6699 3178 6548 2986 6397 2835 6165 2775 6110 2589 6233 2438 6302 2383 6151 2287 6096 2164 [[w:Philip the Apostle|Philip]]
poly 7635 2123 7800 2013 8000 2055 8025 2287 7950 2438 8000 2698 8055 2918 7959 3164 7233 3164 7124 2972 7124 2794 6548 2794 6384 2781 6384 2671 6493 2575 6750 2650 7075 2550 7219 2400 7625 2300 [[w:Matthew the Apostle|Matthew]]
poly 8325 2096 8600 2109 8635 2493 8615 2726 8439 2781 8274 2740 8125 2835 8151 2931 8400 2975 8411 3068 8589 3041 8617 3205 7987 3260 8124 3027 7987 2644 7904 2493 7959 2425 8096 2356 [[w:Judas Thaddaeus|Jude]]
poly 8800 2150 8900 2125 9055 2150 9125 2397 9400 2475 9550 2931 9625 3301 9151 3397 8535 3219 8726 3014 8466 3068 8411 2918 8178 2931 8124 2835 8329 2753 8535 2794 8726 2603 8725 2342 [[w:Simon the Zealot|Simon]]
</imagemap>

En el ejemplo anterior se enlaza a muchas páginas distintas en función de donde se pulse. Para obtener información sobre la imagen en sí, se debe pulsar en el icono del doble rectángulo

El contenido de una etiqueta ‎<imagemap> se compone de renglones vacíos, comentarios (que comienzan por #) y renglones que contienen lógica.

El primer renglón con lógica especifica la imagen que debe mostrarse. Debe tener el mismo formato que un enlace de imagen normal de MediaWiki (véase ayuda sobre imágenes), pero sin el marcado de [[ y ]] que lo enmarca.

Si la primera línea especifica una imagen «thumb» o «frame», el pie de foto de la primera línea y cualquier parámetro |alt= se tratan como el pie de foto y el texto alternativo de la imagen, tal y como es habitual; en caso contrario, el parámetro |alt= de la primera línea (o, si no existe, cualquier pie de foto) especifica el texto alternativo de la imagen.

En ninguno de los dos casos la imagen en sí contiene texto de título (que suele utilizarse para las descripciones emergentes); cualquier texto de título se extrae de las regiones descritas en las líneas siguientes.

Los renglones adicionales se dividen en «fichas», separadas por espacios. La función de cada renglón la determina la «ficha» inicial.

Una coordenada se compone de dos elementos. El primer elemento es la posición en la horizontal (X) y el segundo, la posición en la vertical (Y). Todas las coordenadas son relativas a la imagen en su tamaño completo, no la imagen visible. Los valores de X y Y deben especificarse como una distancia a partir de la orilla izquierda (recuento de píxeles horizontales) y la distancia desde la parte superior (recuento de píxeles verticales) de la imagen a tamaño completo.

desc

Especifica la ubicación del icono azul «i» , que enlaza a la descripción de la imagen. Valores posibles: top-right, bottom-right (predeterminado), bottom-left, top-left, none. Este parámetro se pasa por alto en aquellas imágenes que utilicen "thumb" o "frame", ya que estas usan en su lugar el icono de rectángulo doble .

poly

Un polígono. Se proporcionan las coordinadas de los vértices, seguidas de un enlace entre corchetes.

rect

Un rectángulo. Los parámetros son las coordenadas de las esquinas superior izquierda e inferior derecha, seguidas por un título al cual enlazar entre corchetes.

Ejemplo

<imagemap>
File:PolierMartinWombwellZoffany.jpg|thumb|200px|Colonel Antoine Polier
rect 269 140 344 305 [[Claude Martin]]
rect 124 147 181 298 [[Antoine Polier|Antoine-Louis Polier]]
desc none
</imagemap>

circle

Un círculo. Los primeros dos parámetros constituyen las coordenadas del centro y el tercero corresponde al radio. Las coordenadas van seguidas de un enlace entre corchetes.

default

Esto proporciona el enlace predeterminado, cuando no se especifican otras regiones.

Todas las coordenadas se especifican de manera relativa a la imagen de origen. La imagen puede escalarse mediante la sintaxis de las miniaturas, en cuyo caso las coordenadas de la imagen interactiva se escalarán también.

Todos los enlaces se escriben en el formato [[Título de la página]] o [[Título de la página|descripción]]. En este último caso, la parte que sigue a la barra vertical "|" se convierte en el atributo «title» del enlace; en la mayoría de los navegadores, aparecerá como una información sobrevolada cuando el usuario pase el cursor por encima; la parte que sigue a la barra vertical también se convierte en el texto alternativo del enlace. Si no se proporcionare una descripción del enlace explícita, se usará el título de la página.

En los casos en que se solapan las categorías, se da prioridad al primer enlace de la lista.

Si quieres que esta extensión (al igual que la mayoría de las extensiones de etiquetas) analice los parámetros de la plantilla, las palabras mágicas o las funciones del analizador, tendrás que utilizar la sintaxis #tag , tal y como hacía w:Template:Click. En este caso, la barra vertical | debe sustituirse por una plantilla {{!}}, cuyo texto de origen es | (excepto cuando aparecen dentro de enlaces o parámetros).

Ejemplo, forma estándar:

<imagemap>
File:ExamplePlant80.png|60px|ExamplePlant
rect 0 107 294 260 [[Plants/ExamplePlant|ExamplePlant]]
desc none
</imagemap>

Ejemplo, con variable {{PAGENAME}}

{{#tag:imagemap|
File:ExamplePlant80.png{{!}}60px{{!}}ExamplePlant
rect 0 107 294 260 [[{{PAGENAME}}/ExamplePlant|ExamplePlant]]
desc none
}}

Ejemplo: modificado para aceptar un parámetro de entrada que controle el tamaño de la imagen:

Estas modificaciones permiten ajustar el tamaño de la plantilla en la página editada (de destino) y eliminan la necesidad de crear plantillas duplicadas con distintos tamaños de imagen.

{{#tag:imagemap|
Image:Examplename.jpg {{!}}{{{1|640px}}}
rect 0 107 294 260
circle 360 114 70
poly 357 216 363 417 211
desc none
}}

Donde {{{1|640px}}} es el parámetro de entrada «1» y el tamaño predeterminado de la imagen es de 640 píxeles.

Nota: para que funcione correctamente, el parámetro de entrada debe ser una cadena de texto que termine en «px».

Por ejemplo, al llamar a una plantilla con el nombre {{TemplateName|400px}}, esta se mostrará con un ancho de 400 píxeles.

Para convertir las imágenes interactivas estándares (existentes) a este formato opcional:

• Reemplace el ‎<imagemap> inicial por {{#tag:imagemap|
• Añadir {{!}}{{{1|640px}}} después del nombre de la imagen (cambiar el tamaño de imagen predeterminado para que coincida con el tamaño actual).

Nota: Al cambiar el tamaño predeterminado (640px en este ejemplo) al tamaño de imagen actual, ninguna de las llamadas de plantilla existentes tendrá que ser modificada y se mostrará correctamente. Las llamadas a plantillas existentes se pueden modificar posteriormente mediante el parámetro de entrada.

• Sustituye el ‎</imagemap> final por el }} (las llaves finales).

Instrucciones

• En ImageMapEdit Howto de Meta-Wiki se puede encontrar una guía sencilla sobre cómo utilizar el editor de mapas de imágenes con la extensión ImageMap.
• En este sitio web encontrarás una guía detallada sobre cómo utilizar el editor de mapas de imágenes Maschek.
• Wikimedia Commons también tiene una página de recursos sobre las imágenes interactivas: Commons:Image map resources
• Ejemplos de imágenes interactivas existentes: Categoría:Mapas de imágenes de Wikipedia

Herramientas del wiki

• meta:User:Dapete/ImageMapEdit#English – Script ImageMapEdit, una herramienta gráfica para determinar las coordenadas que se puede instalar en cualquier wiki.

Herramientas en línea

• http://www.maschek.hu/imagemap/imgmap – Editor de mapas de imágenes en línea, compatible con todas las formas y con la extensión ImageMap.
• http://www.image-maps.com/index.php – Creador de imágenes interactivas básico y en línea.
• http://summerstyle.github.io/summer/ – Creador de imágenes interactivas en línea y de código abierto

Funcionalidades semejantes

• Extension:DrawioEditor – trabajar con diagramas y dibujos
• Extension:Layers – Editor de imágenes y marcado no destructivo

• Stable extensions/es
• Tag extensions/es
• Extensions supporting Composer/es
• ParserFirstCallInit extensions/es
• GPL licensed extensions/es
• Extensions in Wikimedia version control/es
• All extensions/es
• Extensions bundled with MediaWiki 1.21/es
• Extensions used on Wikimedia/es
• Extensions included in BlueSpice/es
• Extensions included in Canasta/es
• Extensions available as Debian packages/es
• Extensions included in Fandom/es
• Extensions included in Miraheze/es
• Extensions included in MyWikis/es
• Extensions included in ProWiki/es
• Extensions included in semantic::core/es
• Extensions included in ShoutWiki/es
• Extensions included in Telepedia/es
• Extensions included in Weird Gloop/es
• Extensions included in wiki.gg/es
• Link extensions/es
• Image map extensions/es

• Extensions with manual MediaWiki version/es