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 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.

Define Coordinates for each Image Map Area
1. Below the Select source box will appear the Image map areas box. 2. Click the little green circle with a plus to the left of the "Zoom. The first row should appear and your page should look like this:  (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 red permanent red line now encloses this first area of your clickable map.

Define Href and Alt for each 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. 4. This is what the image map editor should look like in our example with the Delaware page:

Define Other Image Map Areas
1. After you have finished with the first area, another row for the next area you want to enclose will appear. 2. A small circle with a black dot will appear as the first item in that row. If the little circle is blank, click it so the black dot appears. It is imperative that the black dot appears so you know what row you are working on. 3. If you are unable to see the image, use the scroll bar. 4. 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).

Generating the Wikitext Code
1. Once you have finished defining the Image Map Areas, you are ready to generate your wikitext code. 2. To the right of the "Zoom" box is a box labeled "Output:". Select "Wiki imagemap" from the drop down menu. 3. Click on the little blue icon with the "HTML" label located to the left of the "Zoom" box to generate the wikitext code. 4. Scroll down past the map until you reach the "Code" box. Copy this wikitext code to your sandbox. It will be used to create the image map in the Wiki. 5. Here's what the code from our example looks like:

5. The next step is to copy all of the coding from the code box. Again this is the code used to create the image map in the Wiki. 6. Since we do not want our practice image map to be actually used in the Wiki, we will put the code into a sandbox page. You can title it something like: "template:user:your user name/sandbox/image map practice." 7. Here is what our example looks like in the wiki edit box: 8. This looks good but we have to add a couple of things and remove part of the link to the image.
 * 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.

Fix the code
1. We must remove some of the coding from the link to the image: 