General Form
- Code: Select all
[imagemap=name]imageURL[/imagemap]
[map=name]
[area=x1,y1,x2,y2,x3,y3,x4,y4]link[/area] //More area lines can follow this one, following the same template. You need at least three coordinates.
[/map]
As you can see, the raw code for this is fairly link-heavy, as you need both a link to the image itself as well as links to all the other things you want to link from it. As for the coordinates, well, we'll get into that in a moment.
Sample Code
- Code: Select all
[center][imagemap=Johto]http://cdn.bulbagarden.net/upload/0/04/Johto.png[/imagemap]
[map=Johto]
[area=79,40,79,58,98,58,98,40]https://www.roleplaygateway.com/roleplay/the-multiverse/places/ecruteak-city[/area]
[area=88,120,88,130,106,130,106,120]https://www.roleplaygateway.com/roleplay/the-multiverse/places/azalea-town[/area]
[area=55,65,55,82,74,82,74,65]https://www.roleplaygateway.com/roleplay/the-multiverse/places/olivine-city[/area]
[area=43,59,43,70,54,70,54,59]https://www.roleplaygateway.com/roleplay/the-multiverse/places/battle-frontier[/area]
[area=49,98,49,104,56,104,56,98]https://www.roleplaygateway.com/roleplay/the-multiverse/places/whirl-islands[/area]
[area=119,47,119,58,129,58,129,47]https://www.roleplaygateway.com/roleplay/the-multiverse/places/mahogany-town[/area]
[area=63,87,63,105,89,105,89,87]https://www.roleplaygateway.com/roleplay/the-multiverse/places/goldenrod-city[/area]
[/map][/center]
This is a sample of the code I used to make the imagemap of the Johto region for Ecruteak City in The Multiverse. Let's go down it line by line.
Center tags centers the picture as a whole to make it look pretty and prominent. These are purely optional.
Imagemap tags tell the server that certain commands are valid for this particular picture, namely the area command.
The map tags start and end the list of clickable areas in the picture.
Area tags specify the pixel coordinates of the vertices for each clickable region. The destination link is inside the area tags. In this specific case, note that I'm even allowed to link back to the page the map is on. (As a note on style, I keep each area tag on a separate line. This doesn't impact how the code compiles, but what it does do is make bugs easier to find and squash.)
WARNING! When specifying a region with more than three vertices, make sure the coordinates are to adjacent vertices. In the rectangular regions I drew in the example, an early draft had it so upper right was followed immediately by lower left, making the clickable regions half as big as they should be. Basically, you had to click near the bottom for the link to work normally. So for a rectangle, make sure you go upper left, upper right, bottom right, bottom left! I learned this one the hard way.
N.B. You're allowed to make more complicated shapes than this. However, this way I only have to remember two ordered pairs when finding the coordinates in the image. It's just a personal preference.
After you're done linking all the things, you can proceed to pin your map wherever you like--on a place page to show what towns are adjacent, or maybe in one of your OOC threads to help breathe life into the world you're playing in. Then if a place on the picture looks interesting, and you put a button there, someone will be taken to the page for that location and be able to learn more about it!
