Check out this Guide on the Standardisation of Image Maps on the Edge Chronicles Wiki

ImageMaps are maps or pictures that, when you click on something, take you that page on the wiki. For an example, see ImageMap The Edge or to the article on the First Age of Flight or Sanctaphrax. This is an easy to follow guide on how to create ImageMaps of whatever you like. All you need is a picture, this guide and a page on the wiki where'd you want to put your ImageMap. Best open those pages in several different tabs in your browser. Creating an ImageMap will take you about half an hour, depending on how many objects there are on the picture. Your first ImageMap will probably take some more time, but you can always pause the project as long as you completed Step 1.

Step 1: First, search for the image you want to use. Take a high-quality picture, otherwise clicking on objects you can't really see won't be helpful.

Make sure the picture is also uploaded on your wiki.

Then upload it on an imagemap generator, for example

Mark all the sections on the picture by clicking on the different objects on your image. You can choose rectangle, which means you get rectangle, poly, meaning you get any shape you like and circle. You'll figure it out quickly, it's really easy. Make sure you remember the order in which you marked the objects on your image. Just write them down in a seperate document or put them in the "Link" or "Name" section.

When you're done, you'll get something like that


It should look somewhat like this.

<img src="url/to/your/image.jpg" alt="" usemap="#Map" />
<map name="Map" id="Map">
<area alt="" title="" href="#" shape="poly" coords="735,571,967,569,963,682,702,683" />
<area alt="" title="" href="#" shape="poly" coords="707,181,859,25,982,211,849,286" />
<area alt="" title="" href="#" shape="poly" coords="453,234,556,235,472,355,625,345" />
<area alt="" title="" href="#" shape="poly" coords="251,207,385,203,385,345,240,342" />
<area alt="" title="" href="#" shape="poly" coords="576,203,663,346,796,290,658,181" />
<area alt="" title="" href="#" shape="poly" coords="159,22,296,25,274,183,170,203" />
<area alt="" title="" href="#" shape="poly" coords="75,258,206,273,200,341,120,333" />
<area alt="" title="" href="#" shape="poly" coords="722,363,898,302,929,428,758,453" />

Step 2:

Now add a new article on your wiki or go to the one where you want to put your ImageMap. Go to the classic source editor, it won't work in the VisualEditor.

Enter <noinclude><br/>{{Under Construction}}< br /></noinclude>

This will mark the page you work on as unfinished. Remove this once you are done.

Then enter:<br/>'''{{Clrl}}<br/><imagemap>''' File:HERECOMESTHENAMEOFTHEPICTUREYOUUSE.PNG|left|640px

Copy everything you got from the ImageMapCreator into the editor and delete everything except the numbers. replace the comma with a space. You can do this manually, or the smart way, which is useful if you have enourmous rows of numbers and a very detailed map. Open a Word document, paste the coordinates in there. Then click on Home, go to the Editing tab, choose replase, or press Ctlr+H. In "Search" you write a comma, and this comma should be replaced with a space. Wait a second, see if it did it allright, then paste this into the Wiki Source editor. This should also work in OpenOffice or Pages or whatever program you use.

If the marks you made had the form of a polyeder (that's the usual form) enter "poly" before the rows of numbers. If you made rectangles, the command is "rect" or "circle" if you did circular forms. Then put the link to the page you want to link the marked section of the image with behind the rows of numbers.

That should look something like this.

poly 735 571 967 569 963 682 702 683 [ [Edgeworld] ]
poly 707 181 859 25 982 211 849 286 Deepwoods
poly 453 234 556 235 472 355 625 345 Mire
poly 251 207 385 203 385 345 240 342 Undertown
poly 576 203 663 346 796 290 658 181 Twilight Woods
poly 159 22 296 25 274 183 170 203 Sanctaphrax
poly 75 258 206 273 200 341 120 333 Stone Gardens
poly 722 363 898 302 929 428 758 453 Edgelands

Close the tags with <br/>'''</imagemap>''''<br />{{Clrl}}<br/>'''Click a place on the map to be taken to its Edge Chronicles Wiki page.''''

Publish the article, and check if the image is somehow cut off at the right side (is a small blue info sign visbile at the right corner?) or maybe too small. Change the size of the image by changing the number of pixels in the command:


Check if all the links work and lead you to the right article!

That's it! If it doesn't work, just compare your source code to an already working ImageMap. Or go to this guide on how to debug your ImageMap. For more information, go to link or just send me a message.

Already done:

  • Edge Map First Age of Flight (done, already on First Age of Flight)
  • Edge Map First Age of Flight in colour (done, already on the Main page)
  • Edge Map Second Age of Flight (done, already on Second Age of Flight)
  • Edge Map Third Age of Flight (done, here)
  • Timeline ImageMap Timeline
  • Sanctaphrax (Finally done! This was so much work, why is the map so detailed?)

Under Construction/Needs some additions

  • Deepwoods settlements (under construction by Martingloamg, here
  • Goblins (some new discoveries, this might however be complicated, I guess we need a new image and then a new Map)
  • Farrow Ridges (needs some additions as soon as we have the articles)
  • Great Glade (needs more details)

To do:

  • Family Tree
  • Riverrise
  • A Skyship with page-internal links?
  • Any other ideas?

Feel free to make new ImageMaps or add to those already on articles. Please tell other people what is already done, for example by commenting on this blog post!