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:

How to create an image map
We will practice with the map of the state of Delaware Genealogy as it only has three counties. We will use it to show you how to create your first image map.

Preparing the image map
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. Bring up the image map editor. This is what you will see at the top of the site: 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. On the box labeled "Output:", select "Wiki imagemap" from dropped down menu. 7. Below the output box will appear a set of five boxes in a row. If a row of boxes does not appear, click the little green circle with a plus to the left of the "Zoom:"and the first row should appear. 8. If you have done everything right so far 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.)

First area
1. In the first row in the first box 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.) 2. 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. 3. 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.) 4. 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. 5. 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. 6. 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.

Rest of the areas
1. After you have finished with the first area, another line for the next area you want to enclose will appear. There should be a small circle with a black dot to the left of the line. If the little circle is blank, click it so the black dot appears. The black dot has to be there so you will know what line you are filling in. Inaddition if you cannot see all the image use the scroll bar. Continue the above procedure until you have enclosed all of the areas on the map you want to label. (In our little example, you will have three enclosed areas with red lines).

Href and Alt
1. Next to the Coords: box you will see "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 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: ''Please be aware you might not place the lines in the same way as they appear in this example. Yours might follow the county boundries more closely. Again this is only an example.''

Coding
1. After you finish outlining the map, click on the little blue icon with the "HTML" label next to the spyclass icon. You will see a coding box appear below the Status box just below the map. The coding in the box is a replication of the coding in Image map areas with additional coding. 2. This will be the actual coding we will use to create the image map. 3. 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: 