~~~
Ok, I know there's already a tutorial on this located here, but I wanted to make a new one that's a bit more "user friendly" for y'all.
I hope this will help explain somethings and help anyone who wants a sig like mine to make one. So here goes.....
STEP ONE
First thing's first, AFTER you have made (or had made for you) your actual image you will use for this signature (saved as either a GIF or JPG file), you MUST download this file :
http://web.mit.edu/wuster/www/gaia/sig_mapper_0.1.zip
This is the EXACT same file (and exact same link) found in Jakabo's thread (no, it's not some virus or any crap like that. Just a ZIP file containing 2 documents for this sig). So DL them first.
After you have it DLed, you'll wanna extract and open it . Within that file are two documents:
- map.php - runtime file
imagemap.class.php - class file for PHP image map
You only really need to mess with one of them for this signature. So open up map.php in Notepad (or any similar text/word processor program you have).
The following text is pretty much taken directly from Jakobo's thread as it is pretty self explanatory.
Jakobo
/* Gaia Image Map Go-er
Rudolph J Heuser
*/
require_once("imagemap.class.php")
// new imageMap
$myImageMap = new imageMap()
See the above lines? Yeah, don't touch them. You need to include them in order to make it work. You don't technically need the comments line, but I have no reservations about beating you with pots and pans.
Jakobo
Below that, you will see a sequence of definitions that define regions that are clickable:
$area = new Rect(84,184,189,192,"")
$myImageMap->addToMap($area)
The first line $area = new Rect(84,184,189,192,""); creates a new rectangle shape. The syntax is:
TOP_LEFT_X,TOP_LEFT_Y,BOTTOM_RIGHT_X,BOTTOM_RIGHT_Y,"URL_TO_GO_TO"
So in the above example, it will create a clickable box that goes from 84,184 to 189,192. The link goes nowhere (in mine, it is the first link in my signature).
You may then add as many of the regions as you need to.
$area = new Rect(84,184,189,192,"")
$myImageMap->addToMap($area)
The first line $area = new Rect(84,184,189,192,""); creates a new rectangle shape. The syntax is:
TOP_LEFT_X,TOP_LEFT_Y,BOTTOM_RIGHT_X,BOTTOM_RIGHT_Y,"URL_TO_GO_TO"
So in the above example, it will create a clickable box that goes from 84,184 to 189,192. The link goes nowhere (in mine, it is the first link in my signature).
You may then add as many of the regions as you need to.
The easiest way to get these coordinates is to open your image up in MS Paint. On your image, hover your mouse over the top left corner of where you'd like one of your links to go. You'll notice in the bottom right corner of MS Paint is a set of numbers. Those numbers are your coordinates for that point! These are referred to as "x,y" coordinates. You'll want to get coordinates for the top left corners and bottom right corners for ALL of your link areas.
If you use my current sig as an example, I had to get coordinates for the top left corner and bottom right corner of all my little black boxes.
Jakobo
See this code?
$myImageMap->setDefaultURL("")
That's the default URL. If they don't click on any of the specified regions, where exactly do they go? You don't technically need this, but it would be nice.
$myImageMap->setDefaultURL("")
That's the default URL. If they don't click on any of the specified regions, where exactly do they go? You don't technically need this, but it would be nice.
I recommend adding a "default url." What this means, is if anyone clicks somewhere on your sig that you did NOT defined with coordinates, then they will be taken to wherever your default url is. In my sig, I have made my default url into my quest thread. So if you click anywhere on my sig that is NOT a defined link, you will be taken to my quest thread by default.
Jakobo
Finally,
// 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)
Don't touch this either. It actually captures the information about where the user clicked on your sig.
// 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)
Don't touch this either. It actually captures the information about where the user clicked on your sig.
Jakobo
Now all that remains is one final question: How the #^$% do I get this into my sig?!
[url=http://path/to/map.php]
[/url]
The most important part is the word ismap in the image tag. It specifies to the browser you will be sending the click information to the link tag. The link tag itself points to your script!
[/url]The most important part is the word ismap in the image tag. It specifies to the browser you will be sending the click information to the link tag. The link tag itself points to your script!
Jakobo
Care to see a final version?
/* Gaia Image Map Go-er
Rudolph J Heuser
*/
require_once("imagemap.class.php")
// new imageMap
$myImageMap = new imageMap()
// define regions
// personal web site
$area = new Rect(60,134,173,144,"http://www.felocity.org")
$myImageMap->addToMap($area)
// fansub group
$area = new Rect(60,144,153,154,"http://www.kaizoku-fansubs.com")
$myImageMap->addToMap($area)
// chord hall
$area = new Rect(60,154,219,164,"http://www.gaiaonline.com/forum/viewtopic.php?t=2049197")
$myImageMap->addToMap($area)
// the grey kitsune
$area = new Rect(60,164,253,174,"http://www.gaiaonline.com/forum/viewtopic.php?t=329330")
$myImageMap->addToMap($area)
// espy's port quest
$area = new Rect(60,174,242,184,"http://www.gaiaonline.com/forum/viewtopic.php?t=1767759")
$myImageMap->addToMap($area)
// thread link thing
$area = new Rect(60,184,262,194,"http://www.gaiaonline.com/forum/viewtopic.php?t=2469814")
$myImageMap->addToMap($area)
// wishlist trade box
$area = new Rect(236,44,493,87,"http://www.gaiaonline.com/gambino/bank.php?mode=trade&uid=507907")
$myImageMap->addToMap($area)
// load my profile if all else fails
$myImageMap->setDefaultURL("http://ian.gaiaonline.com/forum/profile.php?mode=viewprofile&u=507907")
// 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)
?>
/* Gaia Image Map Go-er
Rudolph J Heuser
*/
require_once("imagemap.class.php")
// new imageMap
$myImageMap = new imageMap()
// define regions
// personal web site
$area = new Rect(60,134,173,144,"http://www.felocity.org")
$myImageMap->addToMap($area)
// fansub group
$area = new Rect(60,144,153,154,"http://www.kaizoku-fansubs.com")
$myImageMap->addToMap($area)
// chord hall
$area = new Rect(60,154,219,164,"http://www.gaiaonline.com/forum/viewtopic.php?t=2049197")
$myImageMap->addToMap($area)
// the grey kitsune
$area = new Rect(60,164,253,174,"http://www.gaiaonline.com/forum/viewtopic.php?t=329330")
$myImageMap->addToMap($area)
// espy's port quest
$area = new Rect(60,174,242,184,"http://www.gaiaonline.com/forum/viewtopic.php?t=1767759")
$myImageMap->addToMap($area)
// thread link thing
$area = new Rect(60,184,262,194,"http://www.gaiaonline.com/forum/viewtopic.php?t=2469814")
$myImageMap->addToMap($area)
// wishlist trade box
$area = new Rect(236,44,493,87,"http://www.gaiaonline.com/gambino/bank.php?mode=trade&uid=507907")
$myImageMap->addToMap($area)
// load my profile if all else fails
$myImageMap->setDefaultURL("http://ian.gaiaonline.com/forum/profile.php?mode=viewprofile&u=507907")
// 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)
?>
Save this document as a PHP file once you're done adding your urls and coordinates. No other type of file will work. Only PHP.
Hosting the image:
Hosting the image is easy. Just use whatever you're currently using as an image host, or use any of the number of free ones on the internet.
Hosting the PHP Files:
Now you'll be asking, "Where can I host a PHP document at for free?" Well, that's a toughie. Your BEST bet is to have your OWN web space already that will host PHP, but if you don't then perhaps do a quick search on the net for places that will do it. I am currently using www.hostinganime.com to host my 2 PHP files for this sig. However, if you uwant to use this same host, you should note the following:
Jakobo
HostingAnime.com - (rename imagemap.class.php to "imagemap.php" and change the requires line in map.php. HostingAnime doesn't like .class files it seems)
You will need to upload both of those PHP files to your host. Upload the one you didn't mess with (the imagemap.class.php) AND the one that you worked on (the map.php).
That SHOULD be everything you need to know about making an image map for your sig. If not, please post in this thread and I (or anyone else who knows) will be more than happy to help you out!
Here are some advanced concepts for you who would like to try them. However, I don't have any personal experience with these yet, so if you try them, you're on your own!... unless someone else around here knows about them.
Jakobo
Advanced Box
This deals with advanced applications of the sigmap tutorial concept. Just follow the links to additional tidbits of information:
rotating images with a single image map
single consolidated links thanks to the map.php
putting the popular Shoutbox together with his sigmap!
HARD :: rotating images and a unique linklist on every one!
MODERATE :: rotating shoutboxes with the a unique linklist for each one
rotating images with a single image map
single consolidated links thanks to the map.php
putting the popular Shoutbox together with his sigmap!
HARD :: rotating images and a unique linklist on every one!
MODERATE :: rotating shoutboxes with the a unique linklist for each one
And one more thing.....
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. ^_^
This disclaimer also applies to me and this thread!!
[/url]
