Welcome to Gaia! ::

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

Offline
Making the Most of Your SIG
Using PHP to Generate a Server Side Image Map

Why make a PHP imagemap for your sig?
Gaia has a 255 character limit for signatures (minus URL characters, more info here). Thus, there is not enough room for a very well designed image based sig that then has several links. When you toss in a wishlist, a few more links, and a few more graphical things, you simply run out of space. Thus the creation of this pair of scripts. (note: your sig must all fit within a 500x500 pixel box and be under 100kb total. See Sky Render's tutorial for more help.)

Standard HTML based image maps do not work on Gaia. Many HTML tags are disabled including the ones necessary for imagemapping, I believe. Also, if they did work, there is only an extremely small chance that you will be able to fit one under the signature character limit.

Table of contents:
Post 2 - Requirements
Post 3 - Walkthrough (read this if nothing else)
Post 4 - Example
Post 5 - Extras (non-rectangle shapes by Foolish, alternate methods)
Post 6 - FAQs
Post 7 - Advanced box

Jakobo
Mandatory Disclaimer of DOOM: I don't promise anything with these. I do place them under the Creative Commons License (Not GPL or Similar). Before you ask, I wanted to give CC a fair shake, and show that it can be used for certain applications of code and development. Please, if you develop or do more cool stuff with this foundation, put it up here so others can enjoy it too! I am also not responsible if you do something stupid and wipe out your web server. This also only extends my region class into Rect. Eventually, I will add Circle, and I would love to add Poly so that this functions exactly like a Server Side Image Map. Alas, that all takes time, and I only can sit here and bang on keys so many hours a day. ^_^

Disclaimer
Yes, I have permission from Jakobo to do this. Here's the story.

Jakobo created the original code and thread for imagemaps. You can find it here.

Due to his being a mod and then an admin, he's been too busy to ever update the thread. The thread was perfectly good and all, however as many regulars of the thread probably also realized, there were a few FAQs and common problems that could be addressed in the tutorial instead of repeatedly each time a user's map didn't work.

A few days before the creation of this thread, hostinganime.com went down. Many people host their files on it causing many imagemaps to stop working. I found some more hosts and PMed those and some other info to Jakobo so he could add them to the thread. Instead of adding them, he asked me to make this and here we are.


Special thanks to:
Jakobo
Aldo
Foolish

Offline
Requirements:
A Web Server with PHP > 4.3.4RC2 && < 5 (haven't done any testing on 5)
A Image Server (can be same or separate from above)

PHP hosts
exclaim HostUltra
Another free dependable PHP host. Unlimited space, unlimited data transfer. Can access account through FTP clients. Does not allow image hotlinking. (free sign up here)

exclaim 100webspace
Another free dependable PHP host. 100MB space, 3GB data transfer. Can access account through FTP clients. I've had problems with getting confirmation emails. (free sign up here) Potentially not working with imagemaps anymore.

exclaim T35.com
Another free dependable PHP host. Unlimited space, unlimited data transfer. Can access account through FTP clients. Some problems accessing file manager online and through FTP clients.(free sign up here)
    Warning: T35 implemented pop up ads that pop up when using it for imagemaps in the method in this tutorial. It still works, but I would recommend trying a different host or paying for an account if you can.
exclaim HostingAnime.com
Provides free dependable PHP hosting. 20MB of space, unlimited data transfer. Currently one of the more popular hosts for imagemaps on Gaia. Does not allow image hotlinking though. (free sign up here) HostingAnime doesn't work for imagemaps anymore.

exclaim 0PHP.com
exclaim FreePHPHosting.com
exclaim Oinko
These sites contain a list of free PHP hosts. Some are better than others. If anyone wants to try them out and give me a short report, I'll gladly post it on the list.

Image Hosts
exclaim Photobucket
A popular image host on Gaia. Free accounts are only available during certain time periods. (free sign up here)

exclaim TinyPic
Another popular image host on Gaia. Does not require account signup. (free here)

exclaim ImageShack
Another popular image host on Gaia. Also, does not require account signup. (free here)

FallenForesakenAngel
Free PHP/MySQL Hosts

I have checked each of these out for a few minutes to make sure there were no banner ads/popups and are free. Please PM me if one of them goes down or has a problem so I can remove the link. smile

Host Rave

Fun Pic

Bobos

Free Web Host (Upgrading at the moment, signups are down for now.)

The above were taken from FallenForesakenAngel's thread about GQL. I haven't tested if they work or not with the imagemap code.

Offline
Walkthrough:

Preface: there is no need to understand PHP to use this walkthrough to create an imagemap.

It's highly recommended that you have an image before you start the walkthrough. In fact, it's hard to do without an image. Remember your sig must all fit within a 500x500 pixel box and be under 100kb total (more info), so make sure you don't use too large an image.

If you are seeking help, please post in the thread. There are thread regulars that can help you other than myself. It is usually greatly appreciated if you post your image and your map.php code. Posting links to your map.php and imagemap.php files are also useful if you have reached that step.

If you PM me for help, I will ignore you. Post in the thread like it says above.

Personally, I like to see people put some kind of effort into it before I assist them. I believe many of the other regulars in Jakobo's old thread feel the same way. If you want someone to make for you, this thread is usually not the place to ask (though there are some that may do it, for a price sometimes). There are probably some Minishops that sell image maps.

Step 1:

Download and unzip this file.
It contains two files:
- imagemap.php
- map.php
(If you can't unzip the file, you may need this program. Download the free version.)

An alternate way to obtain these files is presented in the FAQ section.

These files are an update of Jakobo's original code which contained some ".class" and was incompatible with some PHP hosts. For convenience, I have just removed ".class" from it so you don't have to worry about it.

Step 2:

Completely ignore the "imagemap.php" file for now. Open up "map.php".

In general you'll need to open a text editor and then open up the file using that. Notepad is the text editor that most people use. If you are having trouble with this, please read the FAQ section.

Step 3:

You should now have a bunch of code in front of you. The first part should look like this.
<?PHP
/* Gaia Image Map Go-er
Rudolph J Heuser (Jakobo on GaiaOnline.com
Modified: John T Wu (borobdin on GaiaOnline.com)
*/

require_once("imagemap.php")

// new imageMap
$myImageMap = new imageMap()

The very last part should look like this:

// capture X and Y from query string
$x_and_y = $_SERVER["QUERY_STRING"]
$x_and_y = explode(",",$x_and_y)
$inX = $x_and_y[0]
$inY = $x_and_y[1]
unset($x_and_y)

// echo $inX. "," . $inY;
$myImageMap->testMap($inX, $inY)

Do not touch anything in either of these areas. Just know that they are needed to make it work.
The comment lines are not technically needed, but Jakobo has no reservations about beating you with pots and pans either. (For those that don't know, putting // in front of a line in the code will cause the server to completely ignore it, these are used to make it easier for humans to read the code).

Step 4:

Now, this is where it gets a little tricky. You should see this code:
$area = new Rect(X_left,Y_top,X_right,Y_bottom,"URL")
$myImageMap->addToMap($area)

You'll need one copy of these for each link you want to make. Just copy and paste it again on a new line for each link you want.

Now, (X_left,Y_top,X_right,Y_bottom,"URL" wink is the part that you need to modify for each link. The following chart should explain what you need to replace each variable with.

Imagine a rectangle around the area you want to go to a certain link.

X_left - x coordinate of the left side of the rectangle
Y_top - y coordinate of the top side of the rectangle
X_right - x coordinate of the right side of the rectangle
Y_bottom - y coordinate of the bottom side of the rectangle
URL - the URL of the link (leave the quotation marks)

Measurements are done in pixels with the top left corner of the image as the 0,0 point. Most image editing programs have a way to find the coordinates of where the cursor is floating over. (the FAQ section a few posts down has a detailed explaination of how to find these coordinates with MS Paint.)

Repeat filling in this information for each link you have. Important: no rectangle areas can overlap each other. If they do overlap, the code will fail and imagemap won't work.

In the end each link will have code that looks like this:
$area = new Rect(322,13,369,68,"http://www.gaiaonline.com/journal/index.php?mode=view&u=21620")
$myImageMap->addToMap($area)


Step 5:

The remaining bit of code should look like this:
$myImageMap->setDefaultURL("")

This is the link you want people to get sent to if they don't click in any of the areas you have mapped out as links in Step 4. Place the link between the quotation marks.

Most people use their Profiles (click the "Profile" button under your post to find your own) since it contains their signature and thus people can reclick for their actual link. However, you can use any link you want.

Step 6:

Save the file and make sure the file extension is ".php" and not anything else like ".txt"

Login to you PHP enabled server account. Upload both "map.php" and "imagemap.php" to the same folder on the server.

Also, upload your image to an image host if you haven't yet. A list of PHP servers and image hosts is found in the preceeding post.

Step 7:

Now to put it into your signature. Copy and paste the following code (with your own URLs to the map.php file and your image file) into your signature text box in Edit Profile.
[url=http://URL/of/map.php][imgmap]http://URL/of/image.gif[/imgmap][/url]


Do not use URL shortening sites like TinyURL. URLs no longer count toward your signature character limit. Using a shortened URL will cause the default URL to be loaded regardless of where the map was clicked.


Click submit at the bottom of the Edit Profile Page. Congratulations, you have successfully added an imagemap to your signature. The End.

Offline
Example:

Alright, this is an example of the full code for "map.php" along with my image map.


My map.php code looks like this:
<?PHP
/* Gaia Image Map Go-er
Rudolph J Heuser (Jakobo on GaiaOnline.com
Modified: John T Wu (borobdin on GaiaOnline.com)
*/

require_once("imagemap.php")

// new imageMap
$myImageMap = new imageMap()

// My profile
$area = new Rect(235,20,304,160,"http://www.gaiaonline.com/profile/profile.php?mode=viewprofile&u=21620")
$myImageMap->addToMap($area)

// Journal
$area = new Rect(322,13,369,68,"http://www.gaiaonline.com/journal/index.php?mode=view&u=21620")
$myImageMap->addToMap($area)

// United Forums of Gaia
$area = new Rect(387,57,419,73,"http://cluster.gaiaonline.com/forum/guilds/index.php?page_mode=4&guild_id=138")
$myImageMap->addToMap($area)

// Gaian Academy
$area = new Rect(387,74,419,88,"http://www.gaiaonline.com/forum/guilds/index.php?page_mode=4&guild_id=92")
$myImageMap->addToMap($area)

// QnF Guild
$area = new Rect(387,89,419,103,"http://www.gaiaonline.com/forum/guilds/index.php?page_mode=4&guild_id=168")
$myImageMap->addToMap($area)

// EVIL Reloaded Guild
$area = new Rect(387,104,419,117,"http://www.gaiaonline.com/forum/guilds/index.php?page_mode=4&guild_id=463")
$myImageMap->addToMap($area)

// PM Ag2S03
$area = new Rect(436,1,499,89,"http://www.gaiaonline.com/profile/privmsg.php?mode=post&u=18066")
$myImageMap->addToMap($area)

// Mutsu no Kami
$area = new Rect(51,56,229,69,"http://www.gaiaonline.com/forum/guilds/index.php?page_mode=4&guild_id=79")
$myImageMap->addToMap($area)

// How to Experience Q&F
$area = new Rect(51,70,229,83,"http://www.gaiaonline.com/forum/viewtopic.php?t=3350205")
$myImageMap->addToMap($area)

// Saikatsu's Avatar Simulator
$area = new Rect(51,84,229,95,"http://neo.sonikteam.dyndns.org/gaiasim/")
$myImageMap->addToMap($area)

// Update FAQ
$area = new Rect(51,96,229,108,"http://www.gaiaonline.com/forum/viewtopic.php?t=2455968")
$myImageMap->addToMap($area)

// NPC: Behind the Pixels
$area = new Rect(51,109,229,122,"http://www.gaiaonline.com/forum/viewtopic.php?t=2201238")
$myImageMap->addToMap($area)

// Buglist v2
$area = new Rect(51,123,229,134,"http://www.gaiaonline.com/forum/viewtopic.php?t=3506917")
$myImageMap->addToMap($area)

// Reserved
$area = new Rect(51,135,229,148,"http://web.mit.edu/wuster/www/gaia/")
$myImageMap->addToMap($area)

// Image Map tutorial
$area = new Rect(51,149,229,161,"http://www.gaiaonline.com/forum/viewtopic.php?t=2469814")
$myImageMap->addToMap($area)


$myImageMap->setDefaultURL("http://web.mit.edu/wuster/www/gaia/")

// capture X and Y from query string
$x_and_y = $_SERVER["QUERY_STRING"]
$x_and_y = explode(",",$x_and_y)
$inX = $x_and_y[0]
$inY = $x_and_y[1]
unset($x_and_y)

// echo $inX. "," . $inY;
$myImageMap->testMap($inX, $inY)

?>


The code in my signature text box in Edit Profile looks like this:
[url=http://boro.vzz.net/map3.php][imgmap]http://img.photobucket.com/albums/v462/borobdin/gaia/imagemap_tut/sig3.jpg[/imgmap][/url]


It looks like this:
User Image

Offline
Foolish's Enhancements:

Foolish
Borobdin: I made an archive for the new style sigmap, it is here: FoolsSigmap.zip It has an HTML howto included, as well as examples, so you can just link to it as is without additional tutorials.

I am working on the sigmap + shoutbox, but first i am editing the shoutbox a little, there are some parts that I don't like much :p


Basic tutorial: here
Ellipse: here

These modifications should work though I haven't had time to try them out myself.

Myspoonistoobig's method:

Myspoonistoobig created an alternate method found here.

This method has the advantage of not needing to find coordinates. If you can't figure out the way presented in this thread, you can try this. Also, if you want help with this method, post in Myspoonistoobig's thread. [New: Spoon is offering some way to host you map for free on her own webspace instead of having to find your own host.]

Lord-of-the-flies's method:

Lord-of-the-flies has also created an alternate method found here.

The coding for this method is fairly simple. It's not PHP based so you don't need to be using a PHP enabled server.

Offline
FAQs:

How do I find the Coordinates for each Link?
This tutorial will be using MS Paint because nearly everyone has it. However, many other image editors also can be used to find coordinates.

First, open your image in Paint.
User Image - Blocked by "Display Image" Settings. Click to show.

Then imagine a rectangle around the area you want to be a link. It may help to actually draw rectangles around all your areas. Make sure they don't overlap and remember not to save changes.
User Image - Blocked by "Display Image" Settings. Click to show.

Next, place your cursor on the left side of the rectangle. Then look down in the bottom right corner of the Paint window. You'll see two numbers. (Note: you need to have "Status Bar" checked in the View menu.) The number on the left, circled, is the X_left number.
User Image - Blocked by "Display Image" Settings. Click to show.

Put your cursor on the top side of the rectangle. The number on the right, circled, is the Y_top number.
User Image - Blocked by "Display Image" Settings. Click to show.User Image - Blocked by "Display Image" Settings. Click to show.

Put your cursor on the right side of the rectangle. The number on the left, circled, is the X_right number.
User Image - Blocked by "Display Image" Settings. Click to show.User Image - Blocked by "Display Image" Settings. Click to show.

Put your cursor on the bottom side of the rectangle. The number on the right, circled, is the Y_bottom number.
User Image - Blocked by "Display Image" Settings. Click to show.User Image - Blocked by "Display Image" Settings. Click to show.

What if I want to use circles or other shapes?
Unfortunately, only rectangles are available with this code. You can cover strange shaped areas by dividing the link into several rectangles all linking to the same URL.

If you are 1337 PHP hax0r and want to try to write code for other kinds of shapes, go ahead. I'm sure Jakobo will be happy to integrate it into his code.

EDIT:
Foolish is a 1337 PHP hax0r and has posted code for several other shapes. See previous post for more info. (Please note the if you try these and you can't get them to work, you may have a hard time getting help.)

Why does the Redirect Frame show up?
Even if the link is a Gaia webpage, the way PHP image maps work is that you go to something outside of Gaia (the map.php file) which sends it back to a Gaia webpage. Since it goes outside of Gaia (albeit discretely), it will cause the Redirect Frame to show up. More info on Redirect here.

How do I open and edit PHP files?
PHP files should be opened in a text editor such as Notepad. Try not to use word processors as they tend to add hidden extra characters that prevent the code from working.

The .php file extension may be assigned to be opened by a strange default program and not a text editor. Ignore that. To open, simply right click and choose "Open With". Then choose Notepad from the list of programs.

When saving the file, Notepad will try to add its own file extension (.txt) in some cases (making "map.php.txt" wink . This will prevent the map from working. So when saving, make sure to choose "All Files" from the "Save as type:" drop down menu. Afterward, check the filename to make sure .txt is not tagged on. If it is, deleted it out of the filename and it should be fine.

Can't access or unzip the file in step 1, what should I do?
The initial code is posted here along with instructions on how to create your own initial files. Once you have these files, proceed with step 2 of the walkthrough. (You may want to read the above FAQ about PHP files and Notepad.)



And just randomly....a link to the BBcode FAQ:
click

Offline
Advanced Box:

This deals with advanced applications of the sigmap tutorial concept. Just follow the links to additional tidbits of information. These are copied directly from and all link back to Jakobo's old thread. It's only recommended that you try these if you've successfully completed the above imagemap already.

rotating images with a single image map
single consolidated links thanks to the map.php
putting the popular Shoutbox together with his sigmap! (um...missing, sorry)
HARD :: rotating images and a unique linklist on every one!
MODERATE :: rotating shoutboxes with the a unique linklist for each one

AAN has done nearly all of these variations at some point. He's offered to help if you can't get them to work.

Outlinks:
Shoutbox thread by Sethykins
Random Image thread by R A M Z A

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

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

If you sell imagemaps and want a link, PM me or post in the thread. No guarantees on the quality of these shops. You'll have to sort through and see about them yourself if you can't figure out the walkthrough but still want one.

11,800 Points
  • Partygoer 500
  • Hellraiser 500
  • Cool Cat 500
Offline
ninja There, first post after yours. Happy?

Offline
this thread is teh helpful.. i know ill be comming back here for my siggy needs.

IRL Citizen

12,750 Points
  • Profitable 100
  • Tycoon 200
  • Bidding War 100
Offline
I don't see any mistakes Boro! surprised heart

Although I'm not sure if this all will work or not since I haven't tried it but I'm sure someone will point it out if there is a mistake. ^^;

Anyway I have to go now! Sorry it took so long for my reply! sweatdrop

Offline
And if anyone really needs help, I've had work with all of the different types of those maps.

I've used Rando-sig, Shoutbox regular, and the shoutbox-imagemap, and the shoutbox-randosig-unique imagemap on each one.

If anyone needs help, I'll be happy to give it. domokun

Offline
Thanks Sevi and AAN. biggrin

Offline
borobdin
Thanks Sevi and AAN. biggrin
No problemo. And when the hell did you get minis? O:

Offline
I've had minis since essentially when they came out. I just never wore them before cause I didn't like how they looked with my hair. But now you can wear them combined with other head item.

Offline
borobdin
I've had minis since essentially when they came out. I just never wore them before cause I didn't like how they looked with my hair. But now you can wear them combined with other head item.
I hate you. gonk I want Angelics. ;_;
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