Si vous ne parvenez pas à modifier le wiki après avoir ouvert votre session, vous devrez en demander les droits d'édition en utilisant ce formulaire. Vous serez averti lorsque les droits d'édition seront accordés.

Aide:Image carte

De FamilySearch Wiki
Sauter à la navigation Sauter à la recherche

Help-content.png Cet Article Aide vous guidera pour l'édition dans Wiki. Voir Aide contributeur pour participer davantage aux articles.
Visitez le Forum Aide Wiki si vous avez des questions.

The ImageMap extension to the MediaWiki software allows you to insert images with clickable links into articles in the wiki. With the ImageMap extension, you can make an entire image serve as a link to a different article or you can select multiple areas within that image to link to different articles. The ImageMap extension is a powerful and flexible tool, but because it is coded in HTML and defines regions via coordinates, many users may find it difficult to use at first. This guide will show you the easiest way to use the ImageMap extension to use an image to link to another article.

Note:It is not necessary to use an image map to add a link to an entire image, this can be done by adding an image link.

STEPS[modifier | modifier le wikicode]

1. Upload your image[modifier | modifier le wikicode]

  • Upload into FamilySearch Wiki the image you want to make into an image map.

2. Copy the URL for the image[modifier | modifier le wikicode]

  • Right click on the image and choose Copy image URL.
  • Note do not copy the URL from the browser window, it will not work.

3. Open the Image Map Editor[modifier | modifier le wikicode]

NOTE: The link to the previous Image Map Editor is currently unavailable due to User account expired. The following replacement is is an alternative editor. Please report any issues or suggestions for other editor options that could also be included here.

4. Load image into editor[modifier | modifier le wikicode]

  • Paste the URL into "image on the Internet" box.
  • Click "accept" (or the check mark).
  • The image will show up in the image box immediately below.
  • If image does not display, you have a problem with the URL.

5. Open an area section and select the desired shape[modifier | modifier le wikicode]

  • In the Image Map Area click on the plus (+) icon to open a new shape section.
  • Note: The minus (-) icon is used to delete the currently selected section (black dot in the circle to the left of the shape section.
  • Select the correct area type: Rectangle, Circle or Polygon.
  • Most of the time you will probably be using Polygon as most images you will be outlining do not have regular shapes.

6. Install links and title[modifier | modifier le wikicode]

  • Put the link to the article in the Wiki for the area you are outlining into the "Href:" box for the current shape section.
  • Or the URL for a site outside of the wiki.
  • Next, enter the title (tool tip description) in the "Alt:" box. This will display the tool tip that will appear as the cursor is hovered over the specific area of the image.

7. Define the areas within the image[modifier | modifier le wikicode]

  • Go back up to the image box and left click near the desired area in the image.
  • Drag the cursor away from the initial point (for circles and rectangles) to enlarge the shape.
  • Note: Hold down the shift key to change a rectangle into a square.
  • Left click - HOLD inside the shape to move it to the proper location.
  • Move the cursor over the shape boundary until arrows appear then left click - HOLD to resize the shape to cover the desired area. Repeat as necessary.
  • Note: For the circles and rectangles the arrows will appear on the top, bottom, and sides.
  • Note: You could also type number changes directly into the coordinates box if desired.
  • The creation of the polygons is a little more complicated.
  • Left click on the starting point of the area to be selected.
  • Click on the various parts of the image you want to be part of the polygon's area.
  • As you progress along the borders, the area will become shaded.
  • To "close" the polygon hold down the shift' key while marking the second to last point at which time the border will connect back to the starting point.
  • Note: Polygons cannot be resized (they must be redrawn). Select the appropriate shape section by clicking in the circle to the left of the shape selection box (black dot will move there).
  • Move the cursor to the new start point on the image and left click once the cursor cross hairs are visible. This will erase the old polygon when the new one is started.

8. Check the coordinates in the ImageMap box[modifier | modifier le wikicode]

  • After you have finished with the first area, go down to ImageMap extension code box and you will see the coordinates of the area you just outlined.
  • Notice that the link and its name is between the set of [[ ]].
  • You will also notice that area you outlined is shaded so you can see what area has already be covered.

9. Create the next clickable area[modifier | modifier le wikicode]

  • To create the next clickable area on your image, click on the plus (+) icon to open a new section.
  • Enter the next link and title as was done above.
  • Repeat the above procedures (5 - 8) until all the desired areas have be marked.
  • Note: For overlapping image map areas, the first drawn area (the lowest) will take precedence over any click-able areas drawn above it.
  • When you have finished all the areas you want to select, go to ImageMap extension code again and copy all the code in the box including <imagemap> and </imagemap>

10. Create imagemap template[modifier | modifier le wikicode]

  • Enter in the search box Template:Name of Your Image Map.
  • Click on the red link and then edit page to create your template.
    Using the Wikitext editor install this code <noinclude>__NORICHEDITOR__ </noinclude> at the top of the page. This will prevent anyone from opening the file with the Rich Editor which will destroy your code (this is currently the only work-around).
  • Paste in coding you copied from ImageMap extension into Wikitext editor (not the Rich Editor).
  • Since this editor did not allow the addition of the image name (it uses the supplied link information), the image name has to be corrected at this time. Also change the image link from an external link to an internal link (remove the https....).
  • Also include the following code at the bottom of the edit page to designate a category for the template: <noinclude>[[Category:Image map templates]]</noinclude>
  • Save the template.
  • You should see the image and when you put your mouse on the various areas you selected, you should see a tooltip with the title of the area.
  • Click on the area to see if your links are ok.

11. Limit size of image map[modifier | modifier le wikicode]

  • The image will be the size it was uploaded as.
  • If you want to limit the size of the image, go to the WIkitext editor and install a pipe after the name of the image at the top of the coding followed by the size in pixels, like so:
Image:Name of Image.jpg|400px

12. To install your image map[modifier | modifier le wikicode]

  • Installed image on page like any template.
  • Type {{Name of image map}} where you want it on the page.
  • If the image is still too large or you want to increase the size, go back and edit the template by changing the size in pixels at the top of the page.
Help-content.png Des questions?
Visitez le Forum des contributeurs Wiki pour obtenir de l'aide à la contribution Wiki.

Example[modifier | modifier le wikicode]

Note: This is an example that was made using the original image map editor.

In this example, you will take an image of the Oregon flag and make it so that when you click on the image, you are taken to the Oregon page.

  1. Go to, and then click on the link to the file just below image to bring you to the page showing the full URL to link to the image.
  2. Right click the image and choose "Copy image URL."
  3. Go to ImageMap Editor and paste the URL in the URL field of the "Load from URL" box. Enter the full name of the image in the name box. In this example, the full name of the image is Oregon_flag.png.
  4. Click load
  5. The image will then load.
  6. Click Rectangle in the New Area box.
  7. In the link field of the General box, type Oregon.
  8. Next, you will set the clickable area that will link to the "Oregon" page. In the right upper corner of the image, click with the right mouse button. In the left lower corner of the image, click with the left mouse button.
  9. In the Global Settings box, click none.
  10. Paste your code in the appropriate location in the page. You should see something like this:

rect 1 1 741 445 [[Oregon|Oregon]]
desc none

Save your page and test your link. If you followed the instructions for this code, you would see:

OregonOregon flag.png

Tips[modifier | modifier le wikicode]

  • You can use the ImageMap extension and the ImageMap editor to define multiple regions within your image that link to different pages.
  • You can learn more about some advanced applications of the ImageMap extension at MediaWiki.
  • It's a good idea to get familiar with new tools by playing with them in the Sandbox before trying them out on full articles.

Sources and Citations[modifier | modifier le wikicode]

Modèle:Editing help