Jakobo
(?)Community Member
Offline
- Posted: Fri, 04 Jun 2004 00:09:58 +0000
Making the Most of Your SIG
Using PHP to Generate a Server Side Image Map
Major Updates in the "Advanced" Box. Check An Angels Nightmare and myself (Jakobo) sporting some very cool advanced sigs. Links are available. I will provide support for these ONLY after you can prove you have the basic sigmap working. You can't build a skyscraper without a foundation.
The following people have used this to build sigs with several links. You may find their posts in this thread as proof-of-concept...
the dancing kitten, Jakobo, Skorpeyon, Phoenix Goliathane, .e.s.p.y., tidesong, Puffy, ryanvh22, p00p3r, An Angels Nightmare, [Meky], XenonFreak, aoyume, Kanjii, Rayquazza, lupin, Saikatsu, Adrak Bostil, feralchicken, Chibigreen Tejinashi, Kenjoki Ikari, Mikoo, Spinall_D, screamer, Atriz, Arielle, [Malakai]
Also added a section for web host issues, and an "Advanced Box" for people who have taken their sigs with this tecnhnique to the next level.
Let's face it. 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.
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. ^_^
Requirements:
A Web Server with PHP > 4.3.4RC2 && < 5 (haven't done any testing on 5)
A desire to read the rest of this post
Configuration:
Download the Sig Mapper ZIP File: http://felocity.org/files/gaiaonline/sig_mapper_0.1.zip
-EDIT BY ESPY-Jakobo is revamping his site xd Borobodin is hosting the file on his server in the meantime ~ thanks boro!
http://web.mit.edu/wuster/www/gaia/sig_mapper_0.1.zip
quote from Jakobo: "I don't mind others hosting it, as long as it is released under the exact same terms biggrin It's free for public consumption, and seeing others willing to host it makes me so very happy biggrin biggrin biggrin
(and you can tell'em that too!)"
-END EDIT-
Extract and open the containing folder. In it are two files:
imagemap.class.php - Class File for PHP Image Map
map.php - runtime file
You don't have to do anything with imagemap.class.php, so open map.php
/* 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. 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,"" wink ; 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.
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.
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.
Now all that remains is one final question: How the #^$% do I get this into my sig?!
<center>[url=http://path/to/map.php]<img src="http://path/to/sig.gif" ismap border="0" />[/url]</center>
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!
Care to see a final version?
<?PHP
/* 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)
?>
<center><img src="http://www.felocity.org/tmp/gaiasig.gif" ismap border="0" /></center>
Download the Source File: http://felocity.org/files/gaiaonline/sig_mapper_0.1.zip
(In the words of A List Apart...)
Was it good for you too? Give this sucker a nudge or discuss the merits of this for more dynamimc signatures in your reply.
Using PHP to Generate a Server Side Image Map
Update 07-30@12:46 PDT:[color=white]
Major Updates in the "Advanced" Box. Check An Angels Nightmare and myself (Jakobo) sporting some very cool advanced sigs. Links are available. I will provide support for these ONLY after you can prove you have the basic sigmap working. You can't build a skyscraper without a foundation.
The following people have used this to build sigs with several links. You may find their posts in this thread as proof-of-concept...
the dancing kitten, Jakobo, Skorpeyon, Phoenix Goliathane, .e.s.p.y., tidesong, Puffy, ryanvh22, p00p3r, An Angels Nightmare, [Meky], XenonFreak, aoyume, Kanjii, Rayquazza, lupin, Saikatsu, Adrak Bostil, feralchicken, Chibigreen Tejinashi, Kenjoki Ikari, Mikoo, Spinall_D, screamer, Atriz, Arielle, [Malakai]
Also added a section for web host issues, and an "Advanced Box" for people who have taken their sigs with this tecnhnique to the next level.
[color=red]WEB HOST ODDITIES:
After lots of testing, we have found that the following hosts, web items are NOT compatible with this image map.
exclaim TinyURL (it eats the ?x,y making everything go to default page)
exclaim Lycos UK (used to work, now has watered down PHP engine. stressed )
exclaim 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)
exclaim animehosting.com see HostingAnime.com above
exclaim TinyURL (it eats the ?x,y making everything go to default page)
exclaim Lycos UK (used to work, now has watered down PHP engine. stressed )
exclaim 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)
exclaim animehosting.com see HostingAnime.com above
[color=darkgreen]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
Let's face it. 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.
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. ^_^
Requirements:
A Web Server with PHP > 4.3.4RC2 && < 5 (haven't done any testing on 5)
A desire to read the rest of this post
Configuration:
Download the Sig Mapper ZIP File: http://felocity.org/files/gaiaonline/sig_mapper_0.1.zip
-EDIT BY ESPY-Jakobo is revamping his site xd Borobodin is hosting the file on his server in the meantime ~ thanks boro!
http://web.mit.edu/wuster/www/gaia/sig_mapper_0.1.zip
quote from Jakobo: "I don't mind others hosting it, as long as it is released under the exact same terms biggrin It's free for public consumption, and seeing others willing to host it makes me so very happy biggrin biggrin biggrin
(and you can tell'em that too!)"
-END EDIT-
Extract and open the containing folder. In it are two files:
imagemap.class.php - Class File for PHP Image Map
map.php - runtime file
You don't have to do anything with imagemap.class.php, so open map.php
/* 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. 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,"" wink ; 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.
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.
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.
Now all that remains is one final question: How the #^$% do I get this into my sig?!
<center>[url=http://path/to/map.php]<img src="http://path/to/sig.gif" ismap border="0" />[/url]</center>
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!
Care to see a final version?
<?PHP
/* 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)
?>
<center><img src="http://www.felocity.org/tmp/gaiasig.gif" ismap border="0" /></center>
Download the Source File: http://felocity.org/files/gaiaonline/sig_mapper_0.1.zip
(In the words of A List Apart...)
Was it good for you too? Give this sucker a nudge or discuss the merits of this for more dynamimc signatures in your reply.
