Welcome to Gaia! ::

Gaia Forums » GAIA Online » Site Questions & Assistance » Gaia Guides and Resources
<3 </3
Reply
1 2 3 4 5 6 ... 103 104 105 > >> >>> »|

Wealthy Capitalist

5,750 Points
  • Millionaire 200
  • Entrepreneur 150
  • Money Never Sleeps 200
Offline
User Image - Blocked by "Display Image" Settings. Click to show.
~ By Lord-of-the-flies ~
Welcome to the signature map tutorial. This tutorial, as specified in the title, will assist you in the creation of a server-side signature map in a few easy steps. To make this is simple as possible, I will be using Microsoft paint for the graphics, seeing that many do not have higher level paint programs like Paint Shop Pro or Photoshop. If you have any questions reguarding this tutorial, please post your question in this thread, and I will edit the tutorial to better fit your needs. Thank you.

Don't Panic!
This tutorial may seem large, but it's really not that bad. I was just a little long winded at the time of creation,
and added a number of tips / images to help you along the way. So go ahead, don't be
afraid to use my tutorial because of the size of the posts.
-------------------------

Was my topic useful? Tip, please!
If my thread was helpful, informative, or you just like it, support me by
clicking the "Tip Post" button in this post!

-------------------------

I just want to say that I'm honoured by those who still use this tutorial. Even after 12 years, I still get the occasional tip or post. Thank you all!

Wealthy Capitalist

5,750 Points
  • Millionaire 200
  • Entrepreneur 150
  • Money Never Sleeps 200
Offline
~ Important: Read before continuing ~

There have been several PMs reguarding this tutorial and the server-side 500 error, and this is to clear a couple things up. A 500 error is a error generated by the server often recognized either by the "500" label on the page, or in the case of geocities, the "We've encountered an error" message. If you get this error, this means that you have screwed up the imap file in one way or another.

Experience shows me that 90% of the time, people who recieve this error have failed to read the notice associated with the imap file reguarding the spaces in the coordinate pair sets. I can understand that people may overlook this once a while, however due to so many PMs arriving in my inbox that result in the same answer, I will no longer answer any PMs dealing with this tutorial.

If you have made sure that the spaces are in place and that you have paid very careful attention to the tutorial and are still getting an error, POST IT HERE, and then I will answer your questions.

I WILL NO LONGER ACCEPT PMS REGUARDING HELP FOR THIS TUTORIAL
ANY PMS I RECIEVE REGUARDING THIS WILL BE PROMPTLY DELETED.


Additionally, it has recently come to my attention that there are some people trying to make a profit off my tutorials, selling the files in their mini shop. This will not be tolerated. I provide you this tutorial free of charge to make you, the user, able to enjoy your experience of Gaia Online a little better - but when people sell something that is provided free of charge, it makes me angry.

So, let me make this perfectly clear to anyone who might be trying to make a quick buck by selling anything that I provide - YOU WILL BE REPORTED IF I CATCH YOU. The same problem had happened with the GavSim program, and it had shut down for some time as a result - I do not want to have to take a service away from honest Gaians because some greedy n00b decides it would be a good idea to resell.

DO NOT SELL ANY RESULT OR CODE FROM ANY OF MY TUTORIALS
ANYONE CAUGHT DOING SO WILL BE REPORTED IMMEDIATELY.

Wealthy Capitalist

5,750 Points
  • Millionaire 200
  • Entrepreneur 150
  • Money Never Sleeps 200
Offline
~ Introduction: What is a signature map? ~

A signature map, or sigmap, is a image that will relocate the user to a different location depending on the point of the image the user had clicked on. Usually, this is something used by Gaians if they wish to include serveral different linked locations or images in their signature without using all their alotted space. A sigmap can hold an almost unlimited amount of links (a standard 88x31 button being able to handle 2,728 alone!), making this form of signature a very useful and appealing part of the Gaia Online community.


~ Step one: Finding a host ~

Due to the fact the a large portion of HTML has been disabled in the Gaia Online community, client-side image mapping has been disabled. So, in order to have an image map, we must develop a client-side script to run our links instead. Don't worry, it's not as difficult as it sounds, but the first thing we need to do before anything is find a host that will support the map. Unfortionantly, photobucket won't help us here, so we need an actual webhost. Below is a list of hosts that you can use, as well as host your image on.

Note
User Image - Blocked by "Display Image" Settings. Click to show.Note: The host in question is required to have the imap apache module active in order for this script to work. Most professional hosts like Geocities and Angelfire have this installed, while some others won't.

Wealthy Capitalist

5,750 Points
  • Millionaire 200
  • Entrepreneur 150
  • Money Never Sleeps 200
Offline
~ Step two: The image ~

What would a sigmap be without an image? Well, not very functional, I guess. Anyhow, in order to allow functionality and clickability, we must create and image. For this portion of the tutorial, I will be creating a very simple 250 x 100 banner containing 4 objects: A square, a circle, a triangle, and a polygon.

First, open your favorite paint program, I will be using paint for this as most Windows operating systems have this a a default installation.

User Image - Blocked by "Display Image" Settings. Click to show.

Next, we need to resize our image to create the space we will need in order to develop our image.

Note
User Image - Blocked by "Display Image" Settings. Click to show.Note: Please keep the Gaia Online signature size limit in mind. At this point, no signature may exceed 500x500.


User Image - Blocked by "Display Image" Settings. Click to show.

Now, we make our image, putting whatever we want in it to make our sig. For this tutorial, I'll add a square, circle, triangle, and a polygon.

Save your image, and proceed to the next step.

Wealthy Capitalist

5,750 Points
  • Millionaire 200
  • Entrepreneur 150
  • Money Never Sleeps 200
Offline
~ Step three: The script ~

Now comes the part of the tutorial that makes people a little afraid. Don't worry, because this won't take much time or effort.

Image maps come with three types of shapes: rectangle, circle, and polygon. Though I'm sure that this should be apparent, I'm going to provide definitions for each of these objects, just to make sure.
  • Rectangle
    A rectangle is a four sided, four cornered object in where the corners per Y coordinate match per Y.
  • Circle
    A circle is a round object consisting of no corners. Again, a circle does not have to be a perfect round object, it may also be used for elipses.
  • Polygon
    A polygon is any object is anything else. A triangle, a house shape, whatever. If it isn't a circle and has corners, it's a polygon.


Now that we have the definitions out of the way, it's time to collect some coordinates! This is the most tedious part of this tutorial, as it involves data collection... well, it's not hard, nor is it time consuming, it just requires you to write some things down.

Note
User Image - Blocked by "Display Image" Settings. Click to show.Note: You can also use Mapthis instead of coordinate picking. This is a downloadable 3rd party program, so use at your own risk.


First, you need to open your image in paint, or some other program that gives you coordinates.

Find your first target, and determine what type of shape it is (see the definitions for help). If the item is a rectangle, zoom in and hover your mouse over the pixel in the top-left and bottom-right corners, then write down the coordinates provided to you in the status bar for each.

If the item is a polygon, zoom in and hover your mouse over the pixel in every corner in a clockwise manner, then write down the coordinates provided to you in the status bar for each.

User Image - Blocked by "Display Image" Settings. Click to show.

If your target is a circle, you will need to draw a square around it, making sure the sides of the square touches each edge of the circle. You will need to collect the coordinates from the top-left and bottom-right corner of the square, and that will be the data for the circle.

User Image - Blocked by "Display Image" Settings. Click to show.

Repeat for each object you wish to link.


Now for the code! Yay!
First thing you need to do is create a new text document, then rename it imap.map (making sure to change the extension; Windows will prompt you about this). Open this new file using notepad, and proceed with the tutoral.

Note
User Image - Blocked by "Display Image" Settings. Click to show.Note: If windows does not prompt you about extension change, the file may still be in the .txt extension. For windows XP users, extensions are hidden by default for user file protection. Intead of fiddling with your computer settings, you need to change your file name on your host after uploading. Most hosts give you the option of re-naming a file via the control panel, but if you are using FTP, you'll need to right click and re-name that way. Simply remove the ".txt" potion of the file name, and you'll be able continue normally.


Using your objects in which you have collected data for, determine to where each will go. For example, you might want the triangle to go to ask.com , and the rectange to your blog. Be sure to know what goes where before you start the script.

Once you have your links complete, you can start the file.
Script
default http://DEFAULT_URL
rect http://URL_FOR_RECT 15,25 63,73
circle http://URL_FOR_CIRCLE 75,25 123,73
poly http://URL_FOR_TRIANGLE 158,29 180,73 136,73
poly http://URL_FOR_POLYGON 213,35 233,55 233,73 193,73 193,55

Default - This indicates that the following URL is where to go if the click does not hit a listed spot. Typically, it's a good idea to either link back to Gaia Online, or to a "Incorrect click" page.

Shape - Either rect, circle, or poly. Indicates the type of shape that is avalible to be clicked on.
NOTE THAT THIS IS NOT A URL DESCRIPTION! A lot of people seem to think that the text to the left of the url is supposed to be a description of the URL in question. This is not the case. Use the keyword rect, circle, or poly to describe the SHAPE of the coordinate box.

URL - The URL in which the user is re-directed to when they click within the set coordinates.

Note
User Image - Blocked by "Display Image" Settings. Click to show.Note: DO NOT place a backslash ("/" wink after a Gaia post, thread, or forum URL. This will cause Gaia to return an error, thinking your are looking for something else.


Coordinates - The coordinates for the object, paired up as X,Y and separated by a space between each pair. While rectangles and circles only need two coordinates, polygons will need each coordinate placed into this area. See above for details.

Note
User Image - Blocked by "Display Image" Settings. Click to show.Note: Remember to include the spaces between coordinate sets. Failure to do so will result in a 500 server error from the host.


You can have as many shapes as you want, just be careful not to reuse default. If you choose not to specify the default, it will automatically direct to a "map directory", which will provide links to all the locations provided.

Now upload imap.map and your image to the host you've signed up with, and proceed to the next step.

Wealthy Capitalist

5,750 Points
  • Millionaire 200
  • Entrepreneur 150
  • Money Never Sleeps 200
Offline
~ Step four: The sig code ~

Now for the easiest part, cut and paste. Place the following code into your sig:
[url=http://URL_TO_MAP_FILE]
[imgmap]http://URL_TO_MAP_IMAG[/imgmap]
[/url]

Replace "URL_TO_MAP_FILE" with the appropriate URL to link to your .map file, and "URL_TO_MAP_IMAGE" with the url to the image.

Note
User Image - Blocked by "Display Image" Settings. Click to show.Note: Many people seem to be making an error here. You have to use the [ imgmap] tags in order to make this work properly. If you use an [ img] tag, the url will become static and will not accept the coordinates.


Note about tinyurl.com or any re-location services
Note that you CAN NOT use tinyurl or any such service with URL_TO_MAP_FILE, as the script will not be able to read the coordinates. You may, however, use it to shorten the URL_TO_MAP_IMAGE, as that does not need any form of input to function.

Congratulations! You have just made your very own server-side image map!

[/tutorial]

Wealthy Capitalist

5,750 Points
  • Millionaire 200
  • Entrepreneur 150
  • Money Never Sleeps 200
Offline
~ Example signature map ~


[url=http://avitar.melicbot.com/hosted/tutorial/imap.map]
[imgmap]http://avitar.melicbot.com/hosted/tutorial/final.gif[/imgmap]
[/url]

default http://avitar.melicbot.com/hosted/tutorial/map.php
rect http://avitar.melicbot.com/hosted/tutorial/map.php?sel=rect 15,25 63,73
circle http://avitar.melicbot.com/hosted/tutorial/map.php?sel=cir 75,25 123,73
poly http://avitar.melicbot.com/hosted/tutorial/map.php?sel=tri 158,29 180,73 136,73
poly http://avitar.melicbot.com/hosted/tutorial/map.php?sel=poly 213,35 233,55 233,73 193,73 193,55

Offline
nice, but could you upload a sample of a finished product?

Offline
Nice. And easy to understand. ^^

-Welcome to My Life
~Rei

Wealthy Capitalist

5,750 Points
  • Millionaire 200
  • Entrepreneur 150
  • Money Never Sleeps 200
Offline
Rockwarrior
nice, but could you upload a sample of a finished product?


Sure thing. I'll post it in a bit.

Cluttered Cat

11,350 Points
  • Cat Fancier 100
  • Millionaire 200
  • Partygoer 500
Offline
Wonderful. heart

Cluttered Cat

11,350 Points
  • Cat Fancier 100
  • Millionaire 200
  • Partygoer 500
Offline
Wonderful. heart

Wealthy Capitalist

5,750 Points
  • Millionaire 200
  • Entrepreneur 150
  • Money Never Sleeps 200
Offline
_-=Lee-chan=-_
Wonderful. heart


Thank you.

Offline
Neat. I think this may be simpler than both Myspoonistoobig and Jakobo's scripts. (My tutorial involves Jakobo's script).

A few suggestions:
- a reminder about the signature size rules
- a common mistake that I've found is that people will end up with .txt when saving with notepad...so maybe a more extended explaination of what to do for that.

Questions:
- what kind of scripting is required (webhost requirements)?
- the file can be renamed to anything as long as the extension is .map right?

Offline
For some reason it's not giving me the coordinates at the bottom of the screen.
______

Edit-Never mind.
Gaia Forums » GAIA Online » Site Questions & Assistance » Gaia Guides and Resources

Quick Reply

Submit
Manage Your Items
Other Stuff
More
Get GCash
Offers
More
Get Items
More Items
More
Where Everyone Hangs Out
Other Community Areas
  • Guilds
    fan clubs for the stuff you love
  • Chat
    chat in real time with other Gaians
  • Art Arenas
    browse & rate gaian art galleries
  • Clans
    play zOMG with others
More
Virtual Spaces
Fun Stuff
More
Gaia's Games
Mini-Games
More
Play with GCash
Play with Platinum
More