Help:Wiki University Wikitext--Image Maps

What are image maps

 * These are basically maps where, when you place your mouse over a part of the image, a link will appear to a page in the wiki with genealogical information for that area.
 * Often you will see a U.S. state page with a map of the state with the boundaries of the counties showing. When you put your mouse over a county, a tool tip appears.
 * When you click on that area, you will be taken to a page that has genealogical information about that county.
 * Here is an example of the image map for Delaware:

How to create an image map
We will work with the state of Delaware Genealogy to create our image map. It has only three counties so it is a simple map to practice creating image maps.

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: 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. 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.) 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. Place your cursor on the first point of the area you want to enclose. A cross will appear. Notice that the corrdinates for this starting point will appear in the second box marked "Coords:" with a period between the numbers. 2. Click this first spot and a red line will appear as you move the mouse away from the first point and will stay with the cursor as you move from point to point. 3. Move the mouse 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. There is now a permanent red line from the starting point to the this first point. 4. Keep clicking each of the points of the area you want to enclose until the next to the last one. 5. For the last line to 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. You have now enclose the 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 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 of the image map refers too, so that when you click on the area the article for this area in the wiki will appear. (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 put name of the link you want to appear in the form of 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:

Coding
This is a simple explanation of the procedure. It is rather a long effort, but that's what required to create these image maps. For an even more explanation, Click here.

Try these out


 Exercises

 Quick Quiz

Check your answers