ImageMapEdit Howto/es

This page is a translated version of the page ImageMapEdit Howto and the translation is 27% complete.

ImageMapEdit es un medio para crear ImageMaps de forma rápida y sencilla.

¿A quién va dirigido este tutorial?

Este tutorial podría serte útil si...

quieres saber qué es un mapa de imágenes.
ya estás algo familiarizado con MediaWiki, y ahora te gustaría utilizar ImageMaps.
deseas configurar ImageMapEdit.
deseas aprender a crear y editar ImageMaps

Este tutorial asume que ya has subido la imagen a la wiki, y está mirando la página de descripción del archivo para esa imagen.

¿Qué es un mapa de imagen?

Los ImageMaps se utilizan cuando se desea crear enlaces a partir de varias partes de una misma imagen. La idea es indicar "zonas calientes" en la imagen, sobre las que se pueda hacer clic con el ratón.

En esta página hay varios mapas de imágenes.

¿Por qué quiero uno?

Ejemplos:

Si tienes una imagen de un panel de control con botones, puedes hacer que los botones se puedan pulsar utilizando un imagemap. Esto puede ser útil, por ejemplo, para el manual de una impresora. Hacer clic en un botón puede llevar a una página del manual, a una nueva imagen que muestre las consecuencias de pulsar el botón o a ambas cosas.
Si tienes un esquema, puedes hacer que se pueda hacer clic en los diversos bordes (líneas) y nodos (cajas) del esquema. Puedes utilizarlo para añadir descripciones detalladas a los pasos de un proceso.
En los planos, podría permitir el acceso a subcomponentes más detallados en el plano de esta manera.
Si tienes una fotografía de un grupo de personas, puede permitir que el usuario haga clic para acceder a información sobre cada una de ellas.
En una fotografía de una máquina o un conjunto de componentes, puede proporcionar enlaces a planos, fotos detalladas de cada componente, descripciones, especificaciones, etc.
Puedes hacer fotos de varias habitaciones de un edificio y hacer que se pueda hacer clic en las puertas de cada habitación. Al hacer clic en una de las puertas, el usuario podría "pasar" a la habitación siguiente. Esto puede servir para hacer visitas guiadas.
...
Los mapas de imágenes tienen muchas aplicaciones. Como se pueden utilizar con cualquier imagen, el sistema es muy flexible. ¡Usa tu imaginación!

¿Por qué utilizar ImageMapEdit?

Poner un ImageMaps en un wiki es un poco complicado y lleva un poco de trabajo. ImageMapEdit automatiza y simplifica gran parte del proceso.

Configuración

En primer lugar, averigua si necesita configurar algo: algunos proyectos cargan imageMapEdit siempre que se encuentre en una página del espacio de nombres "File:". Si este es el caso, no es necesaria ninguna configuración.

En segundo lugar, comprueba si imageMapEdit aparece como gadget: algunos proyectos, y en concreto commons, lo proporcionan como gadget. Si este es el caso, tu "Configuración" es habilitar este gadget.

El hecho de que commons lo tenga, lo pone a disposición de cualquiera, al menos para las imágenes libres: Por lo tanto, incluso si decides no configurar imageMapEdit, todavía seras capaz de utilizarlo para cualquier imagen almacenada en commons, mediante la activación de este gadget en tu cuenta en commons, e ir a la página de la imagen en commons para generar el mapa de imágenes.

If you want to have imageMapEdit on a project which does not offer the imageMapEdit gadget, you can do so by editting your common.js page on that project (linked from "Preferences => Appearance" – if it's a red link, create it), and add the following line.

mw.loader.load('//he.wikipedia.org/w/index.php?title=Mediawiki:Gadget-ime.js&action=raw&ctype=text/javascript');

non-wikimedia wikis using mediawiki code, can either add the above line in the "mediawiki:common.js" page, or copy the script (he:Mediawiki:Gadget-ime.js) to a page on their wiki and activating it.

Use it on image pages, i.e., pages in "File:" namespace, by clicking the ImageMapEdit > link that appear under the image.

Editing an ImageMap

This part of the Howto assumes you have already uploaded the image to the wiki, and are looking at the file description page for that image. See Uploading files for details (We will use the wikicode generated by ImageMapEdit to replace the wikicode in that document).

Opening the editor

When viewing an image on the images page, a new link is available, right under the image. Click on this link, and an imagemap editor will appear.

Location of the ImageMapEdit link (original image: File:Metal movable type.jpg)

Figure: The Editor

Once you click the linkette, you should see the imageMapEdit input fields, as shown in the following image:

Above image is an imagemap, and shows the various controls, for creating a new area, editing an existing area, entering the article this area should link to, and finally, the Generated wikicode area, from which you can copy the imagemap and paste it in the article. Above the wikicode box is the "Import" button.

Deciding where to place hot zones

With ImageMaps, your Browser can't "see" the underlying image, and relies entirely on the hot zone information you enter. In fact, in theory, you could put any shape of hot zone anywhere on the image, though this might not be particularly useful.

More usefully, typically there are fairly obvious areas of the image which should be clickable. For instance, boxes in a schema, drawings of buttons, people, etc. Sometimes it can be useful to tailor an image to make it more obvious where people are supposed to click.

Create new area (draw a hot zone)

In the Create new area listbox, click on the shape you want, for your (next) area (hot zone). Then, proceed as follows for that shape.

Alternatively, you can modify previously created areas, by selecting it from the "Edit Area" listbox, and continue editing, e.g., placing the corners of a rectangle at different points, moving the center of a circle. It is not possible to relocate any of a polygon vertices, so editing an existing polygon is limited to "extending" it, by adding a vertex between the last click and the first one.

rect(angle)

In the image, click your left mouse button on one corner of the rectangle you would like to create. You should see a small red cross at the point you clicked. Next, click the right mouse button on the opposite corner. You should see now the whole rectangle, which the two points you clicked marked with red and yellow crosses.

At any time, you can select this rectangle again from the "Areas" listbox, and adjust wither the left-button (red cross) corner, the right-button (yellow cross) corner, or both.

circle

In the image, click your left mouse button in the center of the circle you would like to create. Small red cross will mark the center. Next, click the right mouse button somewhere on the circumference of the circle. You should see now the circle itself, and the marks for the two "clicks".

poly(gon)

In the image, click your left mouse button on the first point of the polygon. . Now, continue to click the left mouse button on each corner of the polygon. At any moment, the last click is assumed to be the last vertex of your polygon, and the last edge connects this vertex to the first one. As you add more points, the polygon is gradually built.

Edit Area

Once you have drawn your hot zone (area), you need to specify what the hot zone links to.

Link target: Specifies which wiki-page the user should go to, when they click on this hot zone (area).
Link Title (Optional): Optionally, you can provide a mouse-over text for the hot zone. By default, if you don't provide a specific mouse-over text, the Link target will appear in the mouse-over text instead.

The other options tweak the hot zone, or allow you to remove it from the ImageMap.

Delete an area

You can delete any area by selecting it in the "Edit area" listbox (the selected area is highlighted on the image), and then "Delete selected area".

IMPORTANT: imageMapEdit does not support any "undo", so be sure before deleting anything

Use the created ImageMap on a page

Finally, we are done creating our imagemap. Imagemaps don't exist in a vacuum, they need to be placed on a page. You typically place an ImageMap in a similar way to placing an Image. The ImageMapEdit tool has created the wikicode for us, so all we need to do is copy the code out of the Generated Code box, and paste it to the relevant page.

Note that in this example, some of the links weren't filled in yet. (note the empty [[]] behind some of the items.) Obviously, you want to fill out all the links before posting your ImageMap.

Other Functionality

General preferences

you can provide a description for the image (This is only used as alt-text).
You can place the " " information link in a different corner of the image, or leave it out altogether.

Import areas from wikicode

If you have an existing imagemap that you would like to edit, you will need to be able to access it somehow. To get the ImageMap (back) into the ImageMapEdit:

click on Show text box >
paste the wikicode for the ImageMap into the box.
click Import

Q&A

Q:My wikicode vanished, where did it go?

Say you have created an Imagemap one day, save it to the page, and go away. A little while later, you notice that you forgot a box, or you have updated the image, or at any rate, you want to revisit the imagemap

However, when you open ImageMapEdit, there's no code! Where did it go?

Answer: ImageMapEdit is not fully integrated into the wiki. It only generates and reads wikicode.

Go to the page where you put the ImageMap, and click edit.
Select and copy the ImageMap code
Then import that code back into ImageMapEdit. See: Import areas from wikicode

Q:Can I still resize my image on the page?

Answer: Sure!

In the imagemap code, just add the size you would like in pixels, just like you would do for an ordinary image; for instance:

File:ImageMap Creation.jpg|700px

Q:I Resized my image on the page, do I need to redraw my imagemap now?

Say you resize the image using the answer provided above, do you need to redraw the ImageMap to fit?

Answer: No, fortunately. The ImageMap gets scaled by the same amount as the image, and remains usable as-is.