Help:Wiki University Wikitext--Image Maps





<< Previous Chapter

What are image maps

 * Image maps are templates and are saved as such.
 * They are basically maps where, when you click on a particular area of the map, you will be taken to a page in the wiki with genealogical information for that area.
 * If you will look at a U.S. state page, you will find a map of the state showing the counties. When you click on a county you will be taken to a page for that county which contains useful genealogical information.
 * Here is an example of the image map for Delaware:

Process overview
We will be using an Online Image Map Editor to generate our wikitext code. That code will be copied to our sandbox where we will effect a few changes before saving it. You will learn how to create your first image map using the map of the state of Delaware Genealogy as it only has three counties.

Note: The "source" image or file used for this tutorial, Delaware Genealogy, was previously uploaded into the FamilySearch Wiki with the name "File:Delaware counties map.PNG". All files used for image mapping must have been previously uploaded into FamilySearch Wiki and contain the extension.PNG. You can find other files in the FamilySearch Wiki by doing a "search" on the image filename (if you know it) or by using ListFiles to check recently uploaded files. IMPORTANT: Use only map images with PNG extensions. All other extensions will not work properly. To convert your map image to a PNG image click here.

Select a source image for upload to the Online Image Map Editor
1. The image shown here is found in the Wiki image data base. (It is not the same image as on the Delaware main page). 2. Click on the right mouse button. Click on "Copy image address" from the drop down menu. (This is an important step. Do not use the URL at the top of the page.  It will not work for creating our image maps. Also, use the original image size, not a reduced version.) 3. In a new tab, bring up the "Online Image Map Editor for MediaWikis". This is what you will see: 4. Paste the "Copy image address" from Step #2 over the "http://" in the box labeled "(2) an image on the Internet". Please Note: ''Take a second to check your input in step 2 of the image address. If the address is a long one, you may want to put it into a sandbox page to see it all. If you should see the extension PNG show up more than once, you need to do this additional step. Go back to the original image in the wiki database and click on it. You should see another copy of the image, but this time all by itself. Click on it with the right button and select "Copy image address" again. Now put this link in step 2. There should only see one PNG extension if you check the link again. Continue to the next steps. If you don't do this, the borders you create in this program will not match the areas you want when you put in a wiki page''. 5. Click on the Load Image button to the right side of the box. The map should appear in the edit box below.

Define Coordinates for the image map area
1. In the Online Image Map Editor, note the Image map areas box. 2. The first row should appear and your page should look like this:              ''(If the row does not appear, click the little green circle with a plus sign.)
 * (Note: you can use the scroll bar on the right of the image to see other areas of the image.)

3. In the first mapping row, select "polygon" from the drop down menu. (Most of the shapes you will be marking will not be rectangles or circles so you will have to use polygons.) 4. Place your cursor on the first point of the area you want to enclose. A cross will appear. Notice that the coordinates for this starting point will appear in the second box marked "Coords:" with a comma between the numbers. 5. With your mouse, left click this first spot. Now move to the second point. As you move the mouse away from the first point a red line will appear and will stay with the cursor as you move from point to point. (What you are doing is roughly tracing around the New Castle County, in this example, with a series of lines.)
 * (Note: if you are using the Google Chrome browser and instead of lines, the area is shaded out and you are unable to accurately trace the area border, you may need to use the Firefox browser.)

6. When you get to the second point of the area you want to enclose, click it. Notice a second set of coordinates will appear next to the starting coordinates separated by a comma. The red line between the first and second points will be permanent. However, the red line will continue with the mouse as you go move towards the third point. 7. Keep clicking each of the points of the area you want to enclose until you get to the last point before returning to the opening point. 8. For the last line to completely enclose the area, push the shift key and then click. The red line will now move automatically to the starting point. You do not have to move your cursor to the starting point, the program does that for you. A permanent red line now encloses this first area of your clickable map.
 * NOTICE Some areas may be displayed in a light gray color. These are areas you did not enclose and is normal for odd shaped polygons.

Define Link and Alt for the image map area
1. Next to the "Coords" box you will see the "Link" and "Alt" boxes. 2. In the "Link" box you will put the internal link to the page that this area you are enclosing refers too. In our example it will be "New Castle County, Delaware Genealogy" (You might copy and paste the name of the article in this box to keep from mistyping the title). 3. In the "Alt" box you will put the name of the internal link to the article. You can use the title of the article or use a different name. This name will appear as a tool tip when your mouse moves over that area of the image map. 4. Do not modify the "Target" box but leave it at the default.

Define additional image map areas
1. After you have finished with the first area, another row for the next area you want to enclose will appear. If it does not appear, click the green button so that it will. 2. In front of the new row, a small circle with a black dot will appear. If the little circle is blank, click it so the black dot does appear. It is imperative that the black dot appears so you know what row you are working on.  Warning: If you do not click the circle so that the black dot appears and you start outlining the next area, you will find the previous area will lose the gray covering and the coordinates that you are now adding will appear in the previous area coordinate boxes. So, whatever coordinates that you had generated in the previous area are gone. Go up to the red circle with the minus sign and click that so you will completely erase the line. Then click the green circle to create a new line if needed and do the previous area again. It is easy to forget about the black dot in the circle. 3. If you are unable to see all of the area you want to outline next, use the scroll bar. Alternatively, you can reduce the size of the image itself by clicking the Zoom and selecting another percentage. 4. If you find that the next area you want to outline is partially covered in light gray from the previous area outlined, find a starting position in the new area that is not covered in light gray. Unfortunately you can't start a new outline inside of a light gray area. 5. Define the Coordinates, Link, and Alt fields for each area until you have enclosed all of the areas on the map you want labeled. (In our little example, you will have three enclosed areas with red lines). 6. When complete, this is what the image map editor should look like in our example with the Delaware page:


 * NOTICE Do not worry if your lines may cross a line from a previous area. Sometimes it is unavoidable, but don't make a habit of it.  You do not need to start over again.
 * NOTICE if you make a mistake, you can always start over by clicking on the little red circle with a minus sign to void any entry.

Generate the wikitext code
1. Once you have finished defining the image map areas, click on "Create Image Map" OR "Code". 2. The wikitext code shown will be used to create the image map on your Wiki page. 3. Here's what the code from our example looks like:


 * NOTICE the coding for the coordinates in the code match the coordinates in the row for the individual counties.
 * NOTICE the internal link to the title of the article for the county and title you gave it are separated by a pipe and are between double square brackets as you would expect for an internal link.

Copy and modify wikitext code
1. Highlight and copy the wikitext code generated from the Online Image Map Editor and paste it into an empty sandbox page. 2. Here is what our example looks like in the wiki edit box on your sandbox page: 3. This looks good but we need to modify the code:


 * Notice that the code displays a software-generated image map reference number. We need to change it to an internal link of the "source" image:

 Image:imgmap2020424113149|Subtitle of Image Map imgmap2020424113149


 * To change the reference number to an internal link, replace everything you see written in red with the internal link, then add a pipe at the end:

 Image: imgmap2020424113149|Subtitle of Image Map imgmap2020424113149


 * The line should now look like this:

 Image:Delaware_counties_map.PNG|


 * The wiki edit box for our example now looks like this:



4. After the code is modified, save your sandbox and check if all the links from the counties work.

Save the image map as a template
1. As mentioned above image maps are usually saved as templates.

2. For this example, create a new template page named "template:your user name/sandbox/image map practice".

3. Copy the image map code from your sandbox to the coding area in this new template and save the template.

4. To test if your image map template works, EMBED the template into a non-template sandbox page using the following code:



3. Now test your practice image map and, again, check if all the links from the counties work.

Areas inside of areas

 * It is recommended that you map all the internal areas first, so they appear at the top of the coding. This way you will not forget to map them before the coding for the larger areas are mapped.

Mixing shapes

 * Sometimes, you might find that using "rectangle" shapes for your areas does not work with "polygon" shapes. It is recommended that you stick with polygons throughout the coding to avoid this conflict.

Hints and tips
 Image:Delaware_counties_map.PNG |500px
 * As you can see, this is a long procedure. But that's what is required to create these image maps. Like anything, with a little practice it will get easier.
 * Here are a few hints:
 * If you have a large map with many small areas to cover, you might think about doing a few areas at a time rather than all at once.
 * Save what you have done and put it into your template and quit the image map program.
 * Open up the image map program and using the same image you started with, do more areas.
 * Then copy and paste into your template all the new "poly" lines you have created.
 * Test the added areas. This should work to help with the smaller areas.
 * Try to make your starting points so they do not overlap areas you have already covered.
 * Pay attention to the little red lines to make sure they cover all the area you want covered.
 * If you make a mistake, you can always start over by clicking on the little red circle with a minus sign to void any entry. Be sure the little circle to the left of the line is checked.  Then click the little green circle with a plus sign to create a new line for the next area you want to enclose.
 * You can limit the size of the image map by adding a pipe and the size you want the image to appear in pixels in the first line of the coding:


 * Here is a link to an alternate Online Image Map Editor by Maschek that "behaves" similarly to the one provided above. It may work better in your web browser.

Convert JPEGs to PNGs map images
Creating clickable image maps with our Maschek image editor require images that have an PNG extension. JEPGs do not work. So any JEPG maps you want to use to make an image map with will require you to convert it to PNG image. Here is how:

Windows Paint
First, you need to open a free program that comes with your Windows program call "Paint." Click on the windows icon in the very lower left hand corner of your monitor. On the menu, scroll down and click on "Windows Accessories." On this menu, click "Paint." That will bring up a large edit box.

Bring up image map
To bring up the map image you want to convert, click on "File" in the upper left hand corner of the Paint edit box. From the menu, click on "Open." This should bring up the page on your computer where you have the map stored you want to convert Click on that image. If you do not see the image, you need to look for it on your computer. The image you want to convert has to be in your computer to do the converting. The map image should now appear inside the edit box of the Paint program.

Converting map image
The next step is to click on "File" again. From the menu, click on "Save as." Give it whatever name you want it to appear as in our data base and then type ".png" (don't forget the period) right after the name. Finally, click Save and it should appear in your computer in the same place with the JEPG image. Put your mouse over the PNG image and make sure you see the new PNG extension. You can now upload this map PNG map image into the Wiki and use it for creating your image map.

Try these out


 Exercises
 * Create an image map using the Delaware image or any other of your choice.

Check your answers

 Quick Quiz
 * Image maps are templates.
 * A. True
 * B. False


 * You can use the URL in the from the tool bar for you image.
 * A. True
 * B. False


 * "Standard imagemap" from the Output menu is ok.
 * A. True
 * B. False


 * The http:// link for the image is ok.
 * A. True
 * B. False


 * It is ok to edit the image map in Rich Editor
 * A. True
 * B. False


 * Placing an image map on a page is just like placing a template on a page.
 * A. True
 * B. False

Check your answers

<< Previous Chapter