Help:How to use Imagemap

From Familypedia

The <Imagemap> tag allows you to create clickable images- useful for Group photos, Genealogical family records, maps of settlements, etc. A problem in the past has been that the regions had to be square, or the author had to figure out coordinates of the regions and enter them by hand. This online tool requires no installation and works online. Extremely useful.

The following map may be too large for some computer displays, but illustrates the utility for Genealogy wikia.

Hover over dots to see informative text. Those forts not in <> have articles and clicking will link to them. Clicking anywhere else on the image will take you to the main article for this series. Example of encoding, see edit view of this talk page.

• Instructions on how to create your own at WikiHow
  • (you have to click new circle for it to save off your last region)
• Maps are incredibly useful for visualizing micro histories, and this could be a good showcase series for help on how to incorporate Imagemaps.

• Former limitations with Imagemap precision are not an issue any more, nor is it a big hassle to do them in text like before. Note that the tool at the wikimedia tools site does polygons, so you can do extremely irregular regions with absolute precision. This is coolness because you can make all those wacky river labels clickable too. Circles on the above image, but irregular regions could easily be used.

1. Upload your image to Genealogy Wikia if you have not done so already.
2. Go to the page displaying the image and description, eg:Image:Framing_hammer_956.jpg, 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.
   • Your browser should now just show the image, but no descriptive information.
   • You should see a URL similar to this: http://images.wikia.com/genealogy/images/a/af/Framing_hammer_956.jpg
   • Copy this URL.
3. Open a new window or tab in your browser and navigate to the ImageMap Editor.
   • The ImageMap Editor 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 ImageMap 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.
4. 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). Be sure to include the file extension (e.g., .PNG, .JPG, .GIF) as well.
   
   
   
   
   
5. Click "Load" to display your image in the ImageMap Editor. The image will display in a box labeled "Image" below the "Load Image" box.
6. Define the region to be used as your link.
   • 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"
     
     
     
     
     
7. Scroll down the page in the ImageMap Editor until you see the box labeled "Global Settings." 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.
8. Scroll down and copy the ImageMap extension code from the box directly below the "Global Settings" box. This is the code you will paste into wikiHow to create your image link.
   • The code begins with the text <imagemap> and ends with the text </imagemap>. 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.
       
       
       
       
       
9. Open a new window or tab in your browser and edit the page you wish to place the ImageMap link in.
10. Paste your code in the appropriate location in the page. You should see something like this:
    <imagemap>
    Image:Framing_hammer_956.jpg|
    rect 1 1 299 218 [[]]
    desc none
    </imagemap>
11. Add the link to your page between the [[]]. For this example we are adding a link to "How to Use a Hammer Safely"
12. 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 [[Use a Hammer Safely]]
    desc none
    </imagemap>
13. Save your page and test your link. If you followed the instructions for this code, you would see:
    
    

14. Error: must specify an image in the first line

15. 
    
16. Be happy (and maybe thank Travis) that wikiHow now has image-linking functionality.

This page uses content from the WikiHow. The original content was at Use-the-MediaWiki-ImageMap-Extension. As with this Familypedia wiki, that portion of the content of Wikimedia Commons is available under the Creative Commons 2.0 License. |}