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!
________________▐▐▐____☆ ☆______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!
________________▐▐▐____☆ ☆______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:
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.
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.
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.
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.
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.
________________▐▐▐____☆ ☆______Makeit1Code __________________________Keep in mind that anyone using links to inappropriate/illegal sites will be banned. No questions asked.
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
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.
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!!!
________________▐▐▐____☆ ☆______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.
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!