How to make an Image Map! (With How to images!)

Did this help?

Yes, (Good sign than!)	62.8%	[ 98 ]
No	11.5%	[ 18 ]
Poll whore	25.6%	[ 40 ]
Total Votes:			[ 156 ]

[II Chibisaurus II]

________________▐ ▐ ▐____☆ ☆______ How To:Make AnImage Map

Hello and Welcome! Why am I making this guide? Well, G r a p e y m a n g o - Has this AWESOME graphics Shop and people are always asking her if she makes Sigmaps, She can make the images, but cant code. So she asked me to teach her how. So now im here, Making it so EVERYONE can learn how!

If you have any questions or concerns after following the guide. You are all more than welcome to PM me or post here about it and I will assist you the best I can.

What is an Image Map?

Also called a "Sigmap", this is an image that allows a user to link to multiple locations depending upon what part of the image is clicked. Image maps save space and makes linking people to various areas of a thread, forum, site, or around the internet seem much more intuitive and appealing to the eye.

Necessary Parts of an Image Map

Aside from the image itself you also need an imap.map file. The imap.map file serves as a directory for your image, as it contains the coordinates that determine the shape of your links and the URLs to whatever location you plan to link to.

Just follow along!

Through this brief tutorial you will be able to follow along as I create the code for the sample picture provided. After seeing how it's done, you can follow these instructions and learn how to build your own iMap to use in your threads, signature, and just about anywhere your heart desires!

[II Chibisaurus II]

________________▐ ▐ ▐____☆ ☆______ Requirements!!
__________________________ In order for your Image Map to work properly, you'll need a host for both your image and .map file.

iMap Hosting

freewebs I have been told Freewebs does hosting, but I cant figure this one out.
www.angelfire.com This is the one I currently use. Its very easy to do.

**if you know of any others, Please let me know

Image Hosting

Photobucket.com
Image Shack.com
tinypic.com

[II Chibisaurus II]

________________▐ ▐ ▐____☆ ☆______ FirstOff!
__________________________ Lets start Out with A Sample Image.With this image, please follow me into the coding section where we will begin your first image map!

[II Chibisaurus II]

________________▐ ▐ ▐____☆ ☆______ CreatingTheCode
__________________________ Images are rather large so please click the links provided to get the full advantage to this tutorial!
With image maps the possibilities are endless as long as you're willing to find all of the coordinates for the particular shape you desire. The different shapes possible are:

☆ Squares
☆ Circles
☆ Polygons


Example Code

Open Notepad and paste the following code.
You can erase the coordinates I've provided as an example and fill them in with your own that you can find below.

default http://DEFAULT_URL
rect http://URL_FOR_RECT 123,19 197,86
circle http://URL_FOR_CIRCLE 22,11 104,92
poly http://URL_FOR_TRIANGLE 60,119 93,190 25,191
poly http://URL_FOR_POLYGON 142,109 182,109 205,134 205,185 187,208 143,208 119,185 119,141

Finding the Coordinates

Note: The first coordinate is on the x-axis which runs from left to right. The second coordinate is on the y-axis which runs up and down.

To find the coordinates, open the image you've chosen for your image map into an image editor (preferably Paint, as it's the easiest and what my examples will be using). You might want to make a rough outline for all of the shapes you plan on using over your image so it's easier to determine exactly where the coordinates lie without them overlapping. If you're using the example image, just follow the steps below for each shape.

Note: Here is a sample as to where to find coordinates for Paint.net

In order to get the coordinates please look at the arrows in the example pictures for the Square, as it identifies where the coordinates are displayed in Paint.net You can use the pencil or any form of a pointer tool to obtain the coordinates. I suggest using the magnifier to make the image larger in order to get a more precise point.

Squares/Rectangles
In order do this properly you must start art the Top Right corner to get the first coordinates. These will be your first set of numbers and should be placed directly following the URL in your iMap code, as show in the example. Next you'll need to put your cursor over the Bottom-Right Corner of the square/rectangle to get the last pair of coordinates for the script. With these two numbers you have covered the surface area within the rectangle's outline. This will make the whole 'fenced' off area a link to whatever a specific URL you inserted into the rectangle's code.

Circles
If your target for your link is a circle, you will need to create a square that the circle is 'eclipsing' over in order to cover the area. So treat it like a rectangle and follow the instructions above, but be sure that you use "circle" in the actual code.

Polygons
A polygon is anything with multiple sides that requires more then your traditional "xx,xx xx,xx" coordinate that the square/circle use. Polygons are actually really simple to work with, unlike circles since they are more precise. You basically start in the top or top-left corner and work your way around clock-wise until you've recorded all of the coordinates to cover the area you plan on linking with a URL.

Instead of making this a 50 pages long, I've made a picture for an example of how to get the coordinates for a polygon. I have used different colored squares to mark each point (the blue spot in the middle of each colored square is the actual coordinate). Following the arrows, as well as the color guide next to the example link, will take you clockwise around the shape to get you the complete coordinates required for code to work successfully.

Example of the order for polygons: Pink, green, Red, Purple, Black, Orange, Yellow, Brown

Example Of Triangle: Pink,Red,Orange

[II Chibisaurus II]

________________▐ ▐ ▐____☆ ☆______ Makeit1Code
__________________________ Keep in mind that anyone using links to inappropriate/illegal sites will be banned. No questions asked.


URLs

This guide does not cover URLs in much depth, but you can simply replace the URLs provided in the sample code found in the post above with whatever links you plan to use for your image. For the example, please pick any five different URLs to fill in the blanks.

Note: If you are using a gaiaonline link, make SURE to delete the last "/" from the url.
**what should be deleted is in ORANGE
http://www.gaiaonline.com/forum/compose/entry/new/51262651/

What is "default" for?

Default is the remaining area on your image that isn't assigned to any particular shape. In the example image, that would be the white area outside of the four shapes. You can link this area to anywhere you want, such as your profile, as it will basically serve as a 'default' page.

Saving your code

Saving the code is the most stressful part because you always think you made a mistake. Once you've completed your code, save your Notepad file with the name YOURNAMEOFIMAGE.map. Afterwards you will upload this to your site, which in this instance is Geocities.

To save as a ".map" :See here to visally see how to Save an .map

If you accidentally left the .txt extension at the end of the file, be sure to rename it once it's uploaded. Go to your file manager and rename by taking the .txt part out. You must use the name imap.map for this to work. If you have multiple scripts, you will need to make a subdirectory in order to name it properly.

Putting it all together

Once you've uploaded your imap.map file and your image file, it's time to put them together using the following code.

[url=IMAP.MAP link][imgmap]Direct link to Image[/imgmap][/url]

And Now you have an Image Map
Go ahead, Click on the Symbols!!!

[II Chibisaurus II]

________________▐ ▐ ▐____☆ ☆______ uploadingyouriMAP
The following is for Angelfire.com
--Thank you Lilum lon-

When you sign up, fill out all the information needed than confirm you email address, when you confirm your email address make sure you take the Web shell version since that's the easiest. Just pick the option to build your own site, but I don't think it matters that much. After you log in there should be a red menu on the right side. Click on "Web Shell."

Then you should see the directory where all your files will be on the website. Underneath all of that will be the File upload section where you can upload your imap.

Just click browse, find your imap and hit upload (pretty much just like photobucket.)

Then go back up to your directory and you'll see your .map file there at the bottom. To get the URL for it, just select that file and click "view." Then just grab the URL at the top to use as your link.

[II Chibisaurus II]

________________▐ ▐ ▐____☆ ☆______ FAQ



Will I be able to use .gif for the image?
Yes, you can use animated Sigmaps! Just MAKE SURE the moving part doesnt overlap parts to click, and dont move your buttons, Having blinking eyes on a doll, or a flowing boarder is fine!

Am I restricted to how many links I have?
No, you are only restricted on size, Gaia Siggy limit is 500*500 so dont make it larger than that.

Is there anything special I have to do to make it work?
Nope, just gotta follow the guild. Remember if your having problems, Just Post here and ask, And I would LOVE to help you.

My image isnt working. Is my coding right?
There could be a couple things you have done wrong, Post your Image Here with the coding you have used, And Ill see if I can help you out!

Im done, I cant figure it out, Can you do it for me?
Sure, but I wont do it for free, Send me a pm or post here.

Where did you learn how to code?
Well two places actually, www.howstuffworks.com And II Starry Night II Who helped me when couldnt figure out what i did wrong.

My question isnt here....
Well than, Ask it silly!

[II Chibisaurus II]

________________▐ ▐ ▐____☆ ☆______ OPEN!!!

[Iris-Way]

It's just a jump to the left
And then a step to the right
With your hands on your hips...

THANK YOU. <3

...You bring your knees in tight
But it's the pelvic thrust that really drives you insane
Let's do the Time Warp again!

[II Chibisaurus II]

--------------------------------------------------------------------------
→ Click!Help Stop Hackers, Sign My Petition!------------------

I hope it helped you heart

----------------------------------------------------------------------------------------------
→ Click!Seven Deadly Sins Auction HB: 200k------------------
→ Click!Toxic's Solo Art Auction HB 40k

[Iris-Way]

It's just a jump to the left
And then a step to the right
With your hands on your hips...

It did! Your guide was very easy to follow.

...You bring your knees in tight
But it's the pelvic thrust that really drives you insane
Let's do the Time Warp again!

[II Chibisaurus II]

--------------------------------------------------------------------------
→ Click!Help Stop Hackers, Sign My Petition!------------------

Im glad it worked for you!

----------------------------------------------------------------------------------------------
→ Click!Seven Deadly Sins Auction HB: 200k------------------
→ Click!Toxic's Solo Art Auction HB 40k

[Lilium Ion]

Really nice guide. It's very simple and easy to follow.

I had some problems with mine, though. Here's my broken map. Maybe you could help?

Omg nevermind. =D I uploaded using Angelfire and it worked. I was using freewebs before.

Thank you! <3

[II Chibisaurus II]

--------------------------------------------------------------------------
→ Click!Help Stop Hackers, Sign My Petition!------------------

Im glad it worked for you too!!!

Yea sometimes it wont work, Like i cant use freewebs. I dont get it ^_^ What is angel fire? Could I have a link so I could add it to my i.map Hosts.

I like the graphics in your siggy they look nice!

----------------------------------------------------------------------------------------------
→ Click!Seven Deadly Sins Auction HB: 200k------------------
→ Click!Toxic's Solo Art Auction HB 40k

[Lilium Ion]

Yeah. I think freewebs doesn't support image maps. Might want to take that off. =s Here's the link to Angelfire.

http://www.angelfire.lycos.com/

It's an old one like Geocities, but you can still sign up for it. =D I think I used Angelfire back in the day when I made my first newbie website.

And thanks. ^^ I made it all tonight after I read your guide. The girl is a drawing of mine I already had, though. It's supposed to be my avatar.