Hello everybody! For the past few days, I have been working on something really exciting that I also think is really awesome! Okay, so it turns out that we have an extension called "imagemap" installed in this wiki, and it creates a sort of "interactive" image, where there are links on the image as well as tooltips. These links, when clicked, can lead a user to a page to learn more about that image. these links can also be restricted to certain portions of the image, so that the link and tooltip will only be shown when the cursor hovers over that portion. Anyway, when I discovered this extension, I immediately thought, "How can this be used on the wiki?". With some thought, I realized that this extension could have many applications in our articles!

Interactive skins

The first idea that came to me was "interactive skins". These would be images of skins that were modified with the imagemap extension so that, when a reader hovered over a character of enemy or objects in the skin, a link and tooltip would be displayed, taking the reader to the article for that object! For example, if someone was looking at the horror skin, and wondered what in the world those creatures were, they could just hover over them, and they would be linked straight to a full descriptive article (hopefully) on what that creature was supposed to be! This can help in other skins as well, such as when Nitrome puts a character or enemy in a skin that a reader doesn't recognize, either because they haven't played the game, or the character doesn't come from a game. As an example, I have imagemapped the first skin Nitrome ever made, the classic skin:

Classic tileAn octopus from the Hot Air seriesA squirrel from Chick FlickA squirrel from Chick FlickA pirate shipA pear doodle from ScribbleAn electro brainPoly from Roly PolyA balloon shaped like a chick from Chick FlickA balloon shaped like an electro brainA balloon shaped like a boulder doodle from ScribbleA balloon shaped like an unknown sphere-headed creatureThe tank from Tanked UpA bulletA keyA hermit crabA hermit crabA hermit crabA caterpillar doodle from ScribbleA drill from Hot AirA drill from Hot AirAn unknown sphere-headed creature in a planeAn unknown sphere-headed creature in a planeAn unnamed robotTwo land mines from Tanked UpAn unknown sphere-headed creatureAn early Nitrome TowersA chick from Chick FlickA paint blowerA dragon worm from the Hot Air seriesHot Air, a main character from the Hot Air seriesThree blots from ScribbleA bee from Feed MeA dragonfly from Feed MeA dragonfly from Feed MeA chick from Chick FlickA treasure chestA fly from Feed MeA fly from Feed MeA fly from Feed MeA venus fly trap from Feed MeA venus fly trap from Feed MeA sleepwalker from SandmanA sleepwalker from SandmanA sleepwalker from SandmanA nightmare from SandmanA portal from SandmanTwo moles from Chick Flick

Interactive level select screens

The next idea that came to me was "interactive level select screens". These would be images of level select screens for a game, except modified to show links on every level button to a walkthrough for that level! For example, a link on the button for level one of, say, Mutiny, would link to the video walkthrough file on the Nitrome Wiki that showed how to complete that level! As an example, I have created an imagemap of the level select screen of Roly Poly:

Roly Poly - Level select screenLevel 1Level 2Level 3Level 4Level 5Level 6Level 7Level 8Level 9Level 10Level 11Level 12Level 13Level 14Level 15Level 16Level 17Level 18Level 19Level 20Level 21Level 22Level 23Level 24Level 25Level 26Level 27Level 28Level 29Level 30

How imagemaps work

After all of these examples, you may be wondering how an imagemap works. I am sure many of you have seen them before, or even used them. Basically, in the first line, you state the image that you want to imagemap, then in the following lines, you state the shapes of the links you want to create. They include poly (polygon), rect (rectangle), and circle. You then have to give the coordinates for the shape you want to create. Finally, you give the link of the article you want the object to be linked to. Also, you may want to have a default line, which states the link that will be shown when the reader is not hovering over an object. The full article on imagemaps on the MediaWiki site is below. If you are to create an imagemap, I recommend you read that article, as I have given very vague instructions.

MediaWiki article on imagemaps: [1]

To create an imagemap

Want to know how I created those imagemaps? Well, these are the steps I went through:

  1. I read the MediaWiki article above.
  2. I saved the image I wanted to imagemap to my computer, then opened it with Gimp.
  3. I hovered over the vertices of the object I wanted to link to in Gimp, then looked at the bottom left corner. There, I saw the exact coordinates of the point I was hovering over.
  4. I typed the coordinates into the imagemap code, then repeated step three for each vertex of the object.
  5. I repeated steps three and four for every object I wanted to link to.
  6. I created a default link.

This process takes time! And patience! And many hours of staring at nonsensical digits and typing! However, the result is always awesome, so I think its well worth the effort.  :)


Well, that's all for now! Hopefully these imagemaps that I've created can be implemented into their respective articles. If you would like to create an imagemap, then awesome! Just make sure no one else is creating an imagemap of the same skin or level select screen as you, or else two people will have put in much effort for the same product. If you have any suggestions or questions, just leave them in the comments below! Thanks for reading!

Ad blocker interference detected!

Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.