Extension:ImageMap/es

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.

Ejemplos


Ejemplo sencillo sin leyenda
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. Otra manera de crear esta imagen con enlace sin utilizar esta extensión es



Ejemplo complejo con leyenda
This example display a thumbnail with dimensions (width × height) 500 × 250 pixels; has dimensions 9,600 × 4,800 pixels. Las coordenadas de cada uno de los vértices se indican en píxeles y representan un punto en la imagen original. So for example, the vertices of the polygon surrounding "Jude" (second to the far right in the image) has horizontal-coordinates (measured in pixels from the left) ranging between  –   and vertical-coordinates (measured in pixels from the top) ranging between   – , which are far outside of the range of the displayed 500 × 250 thumbnail but within range of the 9,600 × 4,800 original image. 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, se sitúa fuera de los límites de la imagen original de 9600 × 4800.

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



Descripción de la sintaxis
El contenido de una etiqueta 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. This must be in the same format as an ordinary MediaWiki image link (see images help), except without the enclosing  and   markup.

If the first line specifies a " " or " " image, then the first line's caption and any alt parameter are treated as the image's caption and alt text in the usual way; otherwise, the first line's alt parameter (or, if absent, any caption) specifies the image's alt text.

In neither case does the image itself have title text (often used for tooltips); any title text is taken from the regions described in later lines.

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» Desc-i.svg, que enlaza a la descripción de la imagen. Valores posibles:,   (predeterminado),  ,  ,  . Este parámetro se pasa por alto en aquellas imágenes que utilicen " " o " ", ya que estas usan en su lugar el icono de rectángulo doble Magnify-clip.png.


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


 * rect
 * Un rectángulo. The parameters are the coordinates of the top-left and bottom-right corners, followed by a title to link to in square brackets.
 * Ejemplo


 * circle
 * Un círculo. Los primeros dos parámetros constituyen las coordenadas del centro y el tercero corresponde al radio. The coordinates are followed by a link in square brackets.


 * default
 * This gives the default link, where no other regions are specified.

Todas las coordenadas se especifican de manera relativa a la imagen de origen. The image can be scaled using thumbnail syntax, in which case the image map coordinates will be automatically scaled as well.

All links are given in either the form Page title or description. In the latter case, the part after the pipe "|" becomes the title attribute of the link—in most browsers, it will pop up as a tooltip when the user hovers over it; the part after the pipe also becomes the alt text for the link. Si no se proporcionare una descripción del enlace explícita, se usará el título de la página.

Areas which overlap give precedence to the first link listed.

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


 * Resolución de problemas
 * 1) Check to see if your php DOM is turned on. You may need to install it if it is not.
 * 2) Check whether  is installed, since this extension relies on /usr/bin/convert for the resizing. If it is not present, you could get a page with only XML errors (tip: use the back-button in the browser, because you can still edit the page).
 * 3) On OVH mutualized hosting   should be like:

Composer
You can also install this extension using built-in support.

composer require mediawiki/image-map @dev



Uso con plantillas, palabras mágicas o funciones del analizador sintáctico
If you want this extension (as with most tag extensions) to parse template parameters, magic words, or parser functions, you will need to use  syntax, such as w:Template:Click did. In this case the vertical bar  must be replaced by a template , where the source text of the template is   (except when they appear inside links or parameters).


 * Ejemplo, forma estándar:


 * Ejemplo, con variable :


 * Example – Modified to accept an input parameter to control image size:

These modifications allow the template size to be adjusted on the edited (target) page and eliminate the need to create duplicate templates of various image sizes.

Where  is the input parameter “1” and a default image size of 640px.

Note: the input parameter requires a text string ending with “px” to function properly.

For example, calling a template  will display the template at 400 pixels.

Para convertir las imágenes interactivas estándares (existentes) a este formato opcional:
 * Replace the initial with
 * Add  after the image name (change the default image size to match the currently existing size).
 *  Note: By changing the default size (640px in this example) to the current image size, none of the existing template calls will have to be modified and will display correctly. Existing template calls can still be modified later by using the input parameter. 


 * Replace the final with   (the trailing braces).



Véase también

 * Instrucciones
 * A simple guide on how to use the Image Map editor with the ImageMap extension can be found at ImageMapEdit Howto on Meta-Wiki.
 * A detailed guide for using the maschek image map editor can be found at this site.
 * 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: w:Category:Wikipedia image maps


 * Herramientas del wiki
 * meta:User:Dapete/ImageMapEdit - ImageMapEdit script, a graphical tool to determine the coordinates that can be installed on any wiki.


 * Herramientas en línea
 * http://www.maschek.hu/imagemap/imgmap Online image map editor, supports all shapes, Extension:ImageMap compatible.
 * 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
 * - working with diagrams and drawings