User:Wonghk3/sandbox/ClickableMaps3

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.

Select a source image for upload to the Online Image Map Editor
1. Go to this image 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.) 3. In a new tab, bring up the "Online Image Map Editor". This is what you will see: 4. Paste the "Copy image address" into the box with the http://. Paste over the "http://". 5. Click on the little green circle with a check mark to the right side of the box. The map should appear in the edit box below. 6. Next click the box labeled "Output;" and select "Wiki imagemap" from the drop down menu. 7. The Zoom will allow you increase or decrease the size of the image.

Define Coordinates for the image map area
1. In the Online Image Map Editor, note the Image map areas box. It is below the Select source 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 to the left of the "Zoom".) (The state image has a scroll bar to the right so the image can be scrolled up and down to see the entire state.) 3. In the first box of that 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 period between the numbers. 5. 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.) 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 Href and Alt for the image map area
1. Next to the "Coords" box you will see the "Href" and "Alt" boxes. 2. In the "Href" 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.

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, Href, 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 the little blue icon with the "HTML" label to generate the wikitext code. The blue icon is located to the left of the "Zoom" box. 2. Scroll down past the map until you reach the "Code" box. The wikitext code shown will be used to create the image map in the Wiki. 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. Since we do not want our practice image map to be actually used in the Wiki, copy the code into a sandbox page. You can title the page: "template:user:your user name/sandbox/image map practice." 2. Here is what our example looks like in the wiki edit box: 3. This looks good but we need to modify the code:


 * Notice that the code defines the HTML link as an external link. We need to change it to an internal link:

