SIGMAP/IMAGE MAP Tutorial ;; plenty of images + video | First Page | Forum

Gaia Forums » GAIA Online » Site Questions & Assistance » Gaia Guides and Resources

Yes! I am successful! >8D		39.1%	[ 70 ]
Noooo. D: I'm so confused.		22.9%	[ 41 ]
I'm just here for the gold, ma'am. :B		10.1%	[ 18 ]
Extra bomby option. /kaboom/		27.9%	[ 50 ]
Total Votes:	[ 179 ]

Report ad

HolySonata

(?)Community Member

Offline

Post: 63656955_1 created on Tue, 27 Jul 2010 21:22:41 +0000
Posted: Tue, 27 Jul 2010 21:22:41 +0000

Hey everybody~ I see you're here to learn how to make a sigmap/image map. :'3
Well, hopefully, my guide can help you do just that.
If that's not what you're here for, then you can read this for kicks. : D

Here's the video: http://www.screentoaster.com/watch/stUElRRkZARFtXQF9aWllcUVJW/how_to_make_a_sigmap_tutorial.
It actually works! XD Hopefully you can hear my voice and see the picture okay. e we;;

User Image

HolySonata

(?)Community Member

Offline

Report Post
Post: 63656955_2 created on Tue, 27 Jul 2010 21:23:44 +0000
Posted: Tue, 27 Jul 2010 21:23:44 +0000

1. What is a sigmap/image map?
xoxoxA sigmap, or image map, is an image that contains multiple links that navigate you to wherever it says it does.
Say you clicked where it said "google". You would then be taken to google. Nifty, yes? :'D

2. What's the use of a sigmap/image map?
xoxoxWell, some people have many, many links that they just want to share with the world, but just do not have to space to do so. The signature length is limited to 512 characters. It's also restricted to 500x500 pixels.
So the best way to fit everything in to such a limited amount of space is to use a sigmap/image map.

3. Can you please make me a sigmap/image map?
xoxoxWell, what sense does asking me to make one when I've made a guide to teach you how to make one? D:

4. What do I need in order to make a sigmap/image map?
xoxoxThat's all listed in the next post titled "what you need". :3 !
If I've forgotten something, then please tell me so that I may add it.

5. Something's not right with my sigmap/image map. Can you help me fix it?
xoxoxOf course! :B I'm not perfect and I probably haven't covered all of your questions.
So please, ask away if you're stuck on something or a problem has occurred.

6. Oh no~ I can't seem to find my question here in the FAQ. D8
xoxoxPost your question in the thread and wait to be answered.~

HolySonata

(?)Community Member

Offline

Report Post
Post: 63656955_3 created on Tue, 27 Jul 2010 21:25:31 +0000
Posted: Tue, 27 Jul 2010 21:25:31 +0000

Most of the following items are needed in order to create a sigmap/image map:

1. An internet browser. Yes, this is an obvious one. But without a browser, I don't even know how you're here. Are you an extraterrestrial being? @w@
These include Internet Explorer, Mozilla Firefox, and Google Chrome. |D

2. An image hosting. Which includes tinypic.com, photobucket.com, and imageshack.us.

3. A file hosting site. Just stick to www.angelfire.lycos.com. It's free and easy to use, plus I don't know any other sites like it. xD
There was geocities, which was a good hosting site as well, but it closed down.

4. MS Paint. This will be used to get the coordinates. (explained later in the steps)

5. An image making program. Like MS Paint, photoshop, etc. Another obvious one, but I'd rather mark it down anyway.

HolySonata

(?)Community Member

Offline

Report Post
Post: 63656955_4 created on Tue, 27 Jul 2010 21:26:23 +0000
Posted: Tue, 27 Jul 2010 21:26:23 +0000

I'm hoping that this is simple enough for you guys. The images should help a bit as well.

1. Make an image, like so. It's easier if you have the names of the sites or places you want your image map to link to.
But be sure to check that it is appropriate and doesn't violate any of Gaia's Terms of Service and Rules/Regulations, etc.
Try to save the image to the best quality possible. I'd suggest .png, but if that's not available to you, then just go with whatever you have.

xoxox

2. Upload your image to an image hosting site. It can be photobucket.com, tinypic.com, or imageshack.us.

3. Make the coding. Now this part is a bit tricky for some, but I'm fairly sure that you can accomplish it. C:
You need to open up notepad and type out the code there. For this tutorial, this is what the first part of my coding will look like for the sample image map.
You'll notice the default and rect I've placed in front of the urls. The default link is put into the coding so that if someone doesn't click in the marked region, they will be taken elsewhere. In this case, the person would be taken to Gaiaonline.com.
The rect simply means what shape the marked region is in, which I have chosen to be rectangles.
Do not put the whole word 'rectangles' in front of the url. It will mess up the coding.

It is not complete yet and I'll explain why. You need coordinates, like (x,y), in the coding as well. You will get these from MS Paint.
Click the below links to see the images.

http://i573.photobucket.com/albums/ss173/HolySonata/Graphics/SigTut1stCoordinate.png
http://i573.photobucket.com/albums/ss173/HolySonata/Graphics/SigTut2ndCoordinate.png

Collect the other coordinates for the other links that you may have and insert them into your coding. Your complete coding should look something like this:

No, you do not need to have coordinates for the default link.

Now save the coding as a .map file so that you can upload it.

HolySonata

(?)Community Member

Offline

Report Post
Post: 63656955_5 created on Tue, 27 Jul 2010 21:26:46 +0000
Posted: Tue, 27 Jul 2010 21:26:46 +0000

Here are the steps continued.

5. Upload your file to angelfire.lycos.com. To do that, go to Web Shell in the pink bar on the left, browse your computer files, upload it and it should appear in the list of files you have on angelfire.
Here's an image to show you what it should look like. Click to see.
http://i573.photobucket.com/albums/ss173/HolySonata/Graphics/AngelfireScrnDirect.png

When you view your file, your menu should look something like this:

6. Put it into your signature. :'D This is the part you've been waiting for. O;
Here's what your signature code should basically look like. Obviously the img code and url will be different.
Pay close attention. The image's url has to be placed into a [ imgmap ] [ /imgmap ] rather than [ img ] [ /img ].
If you don't do that, you'll just have a bunch of errors. Preview to check if you've done everything right.

HolySonata

(?)Community Member

Offline

Report Post
Post: 63656955_6 created on Tue, 27 Jul 2010 21:27:13 +0000
Posted: Tue, 27 Jul 2010 21:27:13 +0000

Here are some example(s) with coding.
Currently I only have one up. But I'll be sure to get up some more when I have time. o uo

[url=http://holysonata.angelfire.com/sigmaptut.map][IMGMAP]http://i573.photobucket.com/albums/ss173/HolySonata/Graphics/SigmapTut.png[/IMGMAP][/url]

HolySonata

(?)Community Member

Offline

Report Post
Post: 63656955_7 created on Tue, 27 Jul 2010 21:27:51 +0000
Posted: Tue, 27 Jul 2010 21:27:51 +0000

[url=http://www.gaiaonline.com/forum/gaia-guides-and-resources/sigmap-image-map-tutorial-plenty-of-images-video/t.63656955/][IMG]http://i573.photobucket.com/albums/ss173/HolySonata/Graphics/SigmapBanner.png[/IMG][/url]