Help:Wiki University Wikitext--Image Maps

What are image maps

 * First of all 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 URL" 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 URL you copied using the right mouse key 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 right 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. 4. When you get to the second point of the area you want to enclose and 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 the next to the last one. 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. 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. (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. You may have notice that as you were adding material for the individual counties, that there was wikitext coding being created in the "Code" editor box below your map. 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 use 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. At the top of the edit box add this wikitext code: __ NORICHEDITOR __. This is prevent anyone editing this image map in the rich editor. The rich editor will mess up an image map almost beyond repair. 2. We must remove some of the coding from the link to the image: