[How To] Make an IMAGE MAP

[Necro-kun]

-hmm- this is pretty interesting...
I'll just post here so I'll find this thread quickly later...
nifty work man^__^

[Solstis]

Foolish

@Solstis: i decided to make the polygons for you, because i am that swell a guy.

$hiphop[0] = new point(15, 70)
$hiphop[1] = new point(34, 69)
$hiphop[2] = new point(92, 215)
$hiphop[3] = new point(92, 241)
$hiphop[4] = new point(15, 242)

$area = new Poly($hiphop, "http://link_to_hiphops")
$myImageMap->addToMap($area)


$tww[0] = new point(63, 15)
$tww[1] = new point(128, 16)
$tww[2] = new point(129, 184)
$tww[3] = new point(109, 183)
$tww[4] = new point(59, 35)

$area = new Poly($tww, "http://link_to_tww")
$myImageMap->addToMap($area)

nota bene: you will need to upload trigfunctions.php and the version of imagemap.php which supports polygons before you can use this, they can be found here

that is just the grey pentagons, not the stars, cause i didnt know where the stars should be linked to.

O_O *yay* *glomps* thankyouthankyouthanyou heart

[Mad~Madisson]

It's much easier than I thought. Thanks a lot 3nodding

[rimedragona]

*checking in*

Solstis

oh, good. then It must juet be my comp witht e error. now who wasn't to explain the random sig + img map ?

Oooh! Has anyone answered this yet? That's what I have right now! Unless she wants the more complicated one where when the image changes, so does the sigmap associated. I don't know how to do that.

Yet.

BUT! To do what I have, you need either

A) A site host that allows remote linking,
or
B) A place that will store your images separately.

I'm assuming you have one of the two, since you already have an image map.

If you are using A, then you use this .php code for the randomizer:

<?php
/*
Based on code by Perpetual Dreamer and Alland.

Instructions:

Place all the files that you want into the directory of your choice,
which will be specified in the $path variable.

Then, just link to the script as a php file. Can be used in a site, such as <img src="filename.php">,
or a forum, using [img]http://yoursite.com/filename.php[/img]

Enjoy.


Rob
*/

//directory here (relative to script)
$path = 'http://YOUR URL HERE';

$i = 0;
$imgDir = opendir ($path)
while ( $file = readdir( $imgDir ) )
{
//checks that file is an image
$file_type = strrchr( $file, "." )
$is_image = eregi( "jpg|gif|png",$file_type )

if ( $file != '.' && $file != '..' && $is_image )
{ $images[$i++] = $file; }
}
closedir ($imgDir)

srand( (double) microtime()*1000000 )
$image_name = $path . '/' . $images[rand( 0,sizeof( $images ) -1 )]
$imgSize = GetImageSize( $image_name )

//ends script if no images found
if ( $i == 0 )
die()

//Display the image
readfile("$image_name")

?&gt;

All you need to change is the URL path, ie:

//directory here (relative to script)
$path = 'http://rimedragona.t35.com/random/images';

to the directory where you have the images stored. Just make sure that those images are the only ones you have in there, or it may grab any old image you have along with the ones you actually want it to use.



If you are using B, then you use this .php code for the randomizer:

&lt;?php
$howMany = #; //howmany images to reandomize

srand ((double) microtime() * 948625) //seed the randomizer
$randNumber = rand(1,$howMany) //make the random Number

//select the image
switch($randNumber)
{
Case 1:
header("Location: http://www.yoururl.com/subdirectory/filename.jpg")
break;

Case 2:
header("Location: http://www.yoururl.com/subdirectory/filename.gif")
break;

/***********************************************************
* Add more case statements here if you need them:
* Case 3:
* header("Location: [new image name]")
* break;
*
* and so on...
**********************************************************/
}
?&gt;

There are two things that change in this one.

First part:

&lt;?php
$howMany = #; //howmany images to reandomize

You change the # to the number of images you want to randomize. You add the images below in the second part.

Second part:

Case 1:
header("Location: http://www.yoururl.com/subdirectory/filename.jpg")
break;

For each case, replace the fake url I put in above with the actual url of the image you want randomized. It can be any web-friendly image format (.gif, .jpg, .png). I strongly recommend against bitmaps. They are huge, and take forever to load, eating bandwidth like no one's business.


Then, no matter which one you choose, you put this in your sig. (That is, if you chose to name your randomizer php 'random.php' like I did)

[url=http://www.yoururl.com/random.php]<img src="http://www.yoururl.com/random.php" ismap border=0>[/url]

The only thing that changes from a regular sigmap is you are linking to a .php file instead of directly to an image. The .php file goes through the images it has listed in it, and decides which one to put up. But the hot spots have to be in the same spot on each image, and the links stay the same. So even if you have one image with a place that links to a guild, and then a different image with that same hotspot linking to a pet shop, it will only go to one or the other, not both.

Refresh a few times and look at my sig, you'll see what I mean. ^_^

Hope that helps!

[manga_gurl09]

whoa that was easier than I thought it would be. Thanks a lot! biggrin

[Teh Yellow Rubber Ducky]

ummm... could someone please help me?
I'm not sure whats wrong with my sig sweatdrop
heres where the php folders are stored-
http://neohermione.t35.com
and image
http://www.boomspeed.com/neohermione/siggymap.png

i followed the instructions... i think... yea i did i did! 3nodding
the image just doesn't link to where it's supposed to gonk

[Aldo]

You'll have to post the code of the imagemap file if you want us to help you out. x_X

[Teh Yellow Rubber Ducky]

Aldo again! lol
i have i'll post it again its got both imagemap.php and map.php
-
http://neohermione.t35.com

[Aldo]

nono, the code itself, not the folder. sweatdrop The code where you had to fill out the numbers and all.

[borobdin]

Aldo

nono, the code itself, not the folder. sweatdrop The code where you had to fill out the numbers and all.

What Aldo means is that we can't actually see the code if you just give use the folder where you put it. The error in most people's image maps is in their code...which is why we want to see it.

[Low End Theorist]

My map doesn't work, It says "Fatal error: Cannot instantiate non-existent class: poly in /data/hosted/lcblackout/map/map.php on line 13." I'm not sure if it's because I used "poly" instead of rectangle, here's my coding. Is there another type of shape instead of "rect" that can handle more coordinates?

&lt;?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()

// Profile
$area = new poly(66,65,63,47,17,40,10,66,11,100,10,170,23,176,76,172,80,156,66,144,68,128,68,110,66,85,"http://www.gaiaonline.com/profile/profile.php?mode=viewprofile&u=764820")
$myImageMap->addToMap($area)

// Quest
$area = new Rect(67,24,149,78,"http://www.gaiaonline.com/forum/viewtopic.php?t=7231556&bt=1113753358&start=0")
$myImageMap->addToMap($area)

// PM
$area = new Rect(172,31,215,70,"http://www.gaiaonline.com/profile/privmsg.php?mode=post&u=764820")
$myImageMap->addToMap($area)

// Friend
$area = new Rect(232,32,276,70,"http://www.gaiaonline.com/profile/friendslist.php?l=confirm&ol=friends&u=764820")
$myImageMap->addToMap($area)

// Trade
$area = new Rect(291,32,334,70,"http://www.gaiaonline.com/gaia/bank.php?mode=trade&uid=764820")
$myImageMap->addToMap($area)

// ImageMap
$area = new Rect(184,87,321,124,"http://www.gaiaonline.com/forum/viewtopic.php?t=4754113&bt=1113315433&start=0")
$myImageMap->addToMap($area)

$myImageMap->setDefaultURL("http://www.gaiaonline.com")

// 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)

?&gt;

[Aldo]

// Profile
$area = new poly(66,65,63,47,17,40,10,66,11,100,10,170,23,176,76,172,80,156,66,144,68,128,68,110,66,85,"http://www.gaiaonline.com/profile/profile.php?mode=viewprofile&u=764820" wink ;
$myImageMap->addToMap($area);

question what *were* you thinking? x_X

Unless you want to start on the polygon sigmap (linked on front page?) That code wont work. sweatdrop

[Low End Theorist]

Aldo

// Profile
$area = new poly(66,65,63,47,17,40,10,66,11,100,10,170,23,176,76,172,80,156,66,144,68,128,68,110,66,85,"http://www.gaiaonline.com/profile/profile.php?mode=viewprofile&u=764820" wink ;
$myImageMap->addToMap($area);

question what *were* you thinking? x_X

Unless you want to start on the polygon sigmap (linked on front page?) That code wont work. sweatdrop

See, i use PaintShopPro for my .htm image maps and get all the coordinates on there and just copy and paste them unto the php file. I thought the poly shape would also work on php like on htm.

[Teh Yellow Rubber Ducky]

Sorry lol i feel so dumb sweatdrop But i'll paste it here now 3nodding

&lt;?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" wink ;

// new imageMap
$myImageMap = new imageMap();

// Profile
$area = new Rect(98_left,14_top,191_right,142_bottom,"http://www.gaiaonline.com/profile/profile.php?mode=viewprofile&u=1151934" wink ;
$myImageMap->addToMap($area);
// shop
$area = new Rect(196_left,8_top,292_right,114_bottom,"http://www.gaiaonline.com/forum/viewtopic.php?t=7237507" wink ;
$myImageMap->addToMap($area);
// Quest
$area = new Rect(196_left,117_top,292_right,158_bottom,"http://www.gaiaonline.com/forum/viewtopic.php?t=6671092" wink ;
$myImageMap->addToMap($area);
// Auction
$area = new Rect(196_left,161_top,292_right,202_bottom,"http://www.gaiaonline.com/forum/viewtopic.php?t=7222098" wink ;
$myImageMap->addToMap($area);
// lotto
$area = new Rect(196_left,205_top,292_right,246_bottom,"lotto" wink ;
$myImageMap->addToMap($area);
// Random
$area = new Rect(196_left,249_top,292_right,290_bottom,"http://www.gaiaonline.com/journal/?u=1151934" wink ;
$myImageMap->addToMap($area);


$myImageMap->setDefaultURL("http://www.gaiaonline.com/forum/viewtopic.php?t=6671092" wink ;

// 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);

?&gt;

[Bigalo]

map.php

&lt;?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" wink ;

// new imageMap
$myImageMap = new imageMap();

// define regions
$area = new Rect(98,14,191,142,"http://www.gaiaonline.com/profile/profile.php?mode=viewprofile&u=1151934" wink ;
$myImageMap->addToMap($area);
$area = new Rect(196,8,292,114,"http://www.gaiaonline.com/forum/viewtopic.php?t=7237507" wink ;
$myImageMap->addToMap($area);
$area = new Rect(196,117,292,158,"http://www.gaiaonline.com/forum/viewtopic.php?t=6671092" wink ;
$myImageMap->addToMap($area);
$area = new Rect(196,161,292,202,"http://www.gaiaonline.com/forum/viewtopic.php?t=7222098" wink ;
$myImageMap->addToMap($area);
$area = new Rect(196,205,292,246,"lotto" wink ;
$myImageMap->addToMap($area);
$area = new Rect(196,249,292,290,"http://www.gaiaonline.com/journal/?u=1151934" wink ;
$myImageMap->addToMap($area);


$myImageMap->setDefaultURL("http://www.gaiaonline.com/forum/viewtopic.php?t=6671092" wink ;

// 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);

?&gt;

I believe this works, the only thing I can think of is that you put like 29_left which the "left" part you don't need