User blog:Ayernam/Imagemaps!

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:

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:

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: 

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. :)

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