Making Imagemaps in BBCode!

a topic in RPG Design, a part of the RPG forum.

Moderator: Scholars

A forum for discussions about the general design of RPG systems and techniques for building good roleplaying games.

Making Imagemaps in BBCode!

Tips: 12.00 INK Postby LawOfTheLand on Sun May 07, 2017 2:13 am

An imagemap is an exciting new feature recently rolled out onto RPG, and it lets you select part of an image and turn it into a link to something else! It's like embedding a link in an image, only here you can specify what part of an image hides the button. For big roleplays with a lot of places in them like The Multiverse, it's a great tool to help visualize how various pieces of a setting fit together geographically, provided you can find an accurate enough graphic to represent the setting as a whole. So let's get started!

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!
Image

Tip jar: the author of this post has received 12.00 INK in return for their work.

User avatar
LawOfTheLand
Groundskeeper
Groundskeeper
Member for 11 years
Beta Tester Promethean Conversation Starter Author World Builder Conversationalist Friendly Beginnings Novelist Builder Donated! Party Starter Contributor Person of Interest Bug Hunter Streamwatcher Maiden Voyager Recruiter Greeter Visual Appeal Tipworthy Property Buyer Salesman Concierge Arc Warden Lifegiver

Re: Making Imagemaps in BBCode!

Tips: 1.25 INK Postby LawOfTheLand on Sat May 27, 2017 4:09 pm

List of imagemaps in the wild:

Cerulean City, The Multiverse
Ecruteak City, The Multiverse
Poni Island, The Multiverse

New idea for making imagemaps: If you have a group picture, you can just make an imagemap linking to each individual member. You could do this for a board of directors, soldiers in a squad, a basketball team, or even a Pokemon trainer and their faithful companions.

Tip jar: the author of this post has received 1.25 INK in return for their work.

User avatar
LawOfTheLand
Groundskeeper
Groundskeeper
Member for 11 years
Beta Tester Promethean Conversation Starter Author World Builder Conversationalist Friendly Beginnings Novelist Builder Donated! Party Starter Contributor Person of Interest Bug Hunter Streamwatcher Maiden Voyager Recruiter Greeter Visual Appeal Tipworthy Property Buyer Salesman Concierge Arc Warden Lifegiver

Re: Making Imagemaps in BBCode!

Tips: 3.25 INK Postby ColeMaibara on Thu Jun 22, 2017 5:41 pm

Negus Sol has some locations marked as an imagemap. The various points lead to The Aurora, Morta IV, Terra, and The Milky Way.

Image

Tip jar: the author of this post has received 3.25 INK in return for their work.

User avatar
ColeMaibara
Coder
Member for 7 years
Contributor Promethean Conversation Starter Author Inspiration World Builder Conversationalist Friendly Beginnings Novelist Builder Beta Tester Storyteller Arc Warden Party Starter Codeweaver Person of Interest Group Theory Helmsman Streamwatcher Maiden Voyager Tipworthy Cult Leader Greeter Visual Appeal Salesman Property Buyer Lifegiver

Re: Making Imagemaps in BBCode!

Tips: 0.25 INK Postby LawOfTheLand on Sat Sep 16, 2017 9:59 pm

Of course, the quick and dirty way to do this would simply be to download the image, edit it in the editor of your choice by adding a legend or simply a bunch of circles and arrows, and then upload the edited version. This way you could also make the argument that you've substantially altered the existing image, and can therefore claim it as fair use or some shit.

Tip jar: the author of this post has received 0.25 INK in return for their work.

User avatar
LawOfTheLand
Groundskeeper
Groundskeeper
Member for 11 years
Beta Tester Promethean Conversation Starter Author World Builder Conversationalist Friendly Beginnings Novelist Builder Donated! Party Starter Contributor Person of Interest Bug Hunter Streamwatcher Maiden Voyager Recruiter Greeter Visual Appeal Tipworthy Property Buyer Salesman Concierge Arc Warden Lifegiver

Re: Making Imagemaps in BBCode!

Tips: 1.25 INK Postby lostamongtrees on Thu Sep 21, 2017 6:18 pm

Thank you so much for this Law! Looking forward to making all the image maps for various locations! I'll update this post with my further additions

Lost's IMG Maps
Image

Tip jar: the author of this post has received 1.25 INK in return for their work.

User avatar
lostamongtrees
Member for 8 years
Promethean Conversation Starter Author Inspiration World Builder Conversationalist Novelist Arc Warden Party Starter Person of Interest Group Theory Helmsman Builder Streamwatcher Beta Tester Storyteller Maiden Voyager Greeter Concierge Friendly Beginnings Recruiter Tipworthy Cult Leader Hordemaster Historian Lifegiver


Post a reply

Make a Donation

$

RPG relies exclusively on user donations to support the platform.

Donors earn the "Contributor" achievement and are permanently recognized in the credits. Consider donating today!

 

Who is online

Users browsing this forum: No registered users and 0 guests

cron