How to Use the MediaWiki ImageMap Extension

Step-by-Step Guide

1. 1

   Step 1: Upload your image to LifeGuide Hub if you have not done so already.

   Your browser should now just show the image, but no descriptive information.
   
   You should see a URL similar to this: https://www.LifeGuide Hub.com/images/a/af/Framing_hammer_956.jpg Copy this URL. , The Image MapEditor is a tool that will help you to select the appropriate region(s) within your image for use as links to other pages.
   
   Once you have selected your region(s), the Image Map editor will also generate the correct code to define those region(s).
   
   This code can then be pasted into your article to make your image map work as intended. , Be sure to include the file extension (e.g., .PNG, .JPG, .GIF) as well. , The image will display in a box labeled "Image" below the "Load Image" box. , Choose the area type that best matches the shape of your image (This example uses a rectangle, which will be the most commonly used shape to select an entire image).
   
   Click on "Rectangle" in the "New Area" box.
   
   Move your mouse pointer to the upper left corner of your image and then left click.
   
   Move your mouse pointer to the lower right corner of your image and then right click.
   
   The XY coordinates for the corners of your image will now be displayed in the boxes indicating "Left/Top" and "Right/Bottom"
   
   If you would like to keep the default settings, you do not need to do anything with this box.
   
   By default, these settings will superimpose a blue circle with an "i" in it on the bottom left corner your image which provides a link to the image's information page (the rest of the image will link to the page you select).
   
   If you do not want to display the information link, select "None." If you would like to select a different location for the information link, choose one of the other locations. , This is the code you will paste into LifeGuide Hub to create your image link.
   
   The code begins with the text <imagemap></imagemap> and ends with the text .
   
   Be sure you copy these and everything between.
   
   The rest of the code defines your area: "rect 1 1 299 298" indicates a rectangle starting at pixel 1,1 (i.e., upper right) and going to pixel 299,218.
   
   The "]" are the brackets that will surround the page the image will link to.
   
   This follows standard wiki markup. ,, You should see something like this: <imagemap> Image:
   Framing_hammer_956.jpg| rect 1 1 299 218 ] desc none </imagemap>
   
   For this example we are adding a link to "How to Use a Hammer Safely"
   
   , If you followed the instructions for this code, you would see:
2. 2

   Step 2: Go to the page displaying the image and description (e.g.

3. 3

   Step 3: https://www.LifeGuide Hub.com/Image:Framing_hammer_956.jpg)

4. 4

   Step 4: 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.

5. 5

   Step 5: Open a new window or tab in your browser and navigate to the ImageMap Editor.

6. 6

   Step 6: Enter your URL into the field labeled URL under "Load from URL" and enter the image name in the field labeled "Name" (note: the image name is the text following the final / in the URL you copied).

7. 7

   Step 7: Click "Load" to display your image in the Image Map Editor.

8. 8

   Step 8: Define the region to be used as your link.

9. 9

   Step 9: Scroll down the page in the ImageMap Editor until you see the box labeled "Global Settings."

10. 10

    Step 10: Scroll down and copy the ImageMap extension code from the box directly below the "Global Settings" box.

11. 11

    Step 11: Open a new window or tab in your browser and edit the page you wish to place the ImageMap link in.

12. 12

    Step 12: Paste your code in the appropriate location in the page.

13. 13

    Step 13: Add the link to your page between the ].

14. 14

    Step 14: Inspect your code to make sure that you have closed the ImageMap tag properly using </imagemap>.Your code should now look like: <imagemap> Image:Framing_hammer_956.jpg| rect 1 1 299 218 ] desc none </imagemap>

15. 15

    Step 15: Save your page and test your link.

Detailed Guide

About the Author