Thread Tools

Bartuc
Sky Pirate
201903.33
Bartuc is offline
 
#1
Old 12-10-2008, 08:47 AM

How to make an Image Map (iMap)

Updated: Friday, 8 May 2009.


Welcome! This is your basic run down with colors and pictures on how to make an image map! I am going to keep this first post fairly brief.

If you have any questions or concerns after following the guide. You are all more than welcome to PM me 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 (virtually any type will do) you also need an imap.map file. This file must be hosted elsewhere, so I'd recommend using a free online web-host. 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!

Last edited by zigbigadorlube; 11-26-2014 at 03:20 AM..

Bartuc
Sky Pirate
201903.33
Bartuc is offline
 
#2
Old 12-10-2008, 08:48 AM

*Requirements*

In order for your Image Map to work properly, you'll need a host for both your image and .map file.

Quote:
Originally Posted by iMap Hosting
GeoCities - GeoCities is now closed
FreeWebs
AngelFire - AngelFire is no longer free
*Please let me know of any other free hosting sites that work with .map files*
Quote:
Originally Posted by Image Hosting

Last edited by zigbigadorlube; 11-26-2014 at 03:21 AM..

Bartuc
Sky Pirate
201903.33
Bartuc is offline
 
#3
Old 12-10-2008, 08:49 AM

First off, the Sample Image!

In order to properly show you how to correctly create an image map, I've provided you with a sample image to play with as I go over the instructions.





With this image, please follow me into the coding section where we will begin your first image map!

Last edited by Bartuc; 07-06-2009 at 03:10 AM..

Bartuc
Sky Pirate
201903.33
Bartuc is offline
 
#4
Old 12-10-2008, 08:49 AM

Creating the Script for the Map!

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 using the methods I've described below.

Code:
default http://DEFAULT_URL
rect http://URL_FOR_RECT 6,3 90,71
circle http://URL_FOR_CIRCLE 86,88 175,172
poly http://URL_FOR_TRIANGLE 216,136 248,207 180,207
poly http://URL_FOR_POLYGON 309,199 347,199 371,224 371,274 351,297 308,297 284,274 284,230
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 Photoshop
For anyone who doesn't have the "Info" tab available, its available under "Window" at the top bar. This was in CS2, so, I assume that previous versions are similar.

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. 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-Left 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 novel, I've made a picture for an example of how to get the coordinates for a polygon. I used different colored squares to mark each point (the black 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: blue, red, green, yellow, pink, maroon, brown

Last edited by Bartuc; 07-06-2009 at 03:12 AM..

Bartuc
Sky Pirate
201903.33
Bartuc is offline
 
#5
Old 12-10-2008, 08:51 AM

The Transition into one code!


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.

Keep in mind that anyone using links to inappropriate/illegal sites will be banned. No questions asked.

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 imap.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.

HTML Code:
[url=IMAP.MAP file link][IMGmap]path to image used[/IMGmap][/url]


::Leading to the end result of your Image Map::


Last edited by Bartuc; 07-06-2009 at 03:11 AM..

Bartuc
Sky Pirate
201903.33
Bartuc is offline
 
#6
Old 12-10-2008, 08:52 AM

FAQ


I see you use .jpg images. Will I be able to use .gif?
I have never used a .gif, but the imap.map script isn't dependent on any particular kind of image file. The image only gives that script a way to be used, so .gifs and most other image types are usable.

Am I restricted to how many links I have?
You are only restricted according to how much space you use and the limitations of the size of the image for signatures.

Is there anything special I have to do to make it work?
As long as you follow the guide, it will work. You will need a hosting site for the imap.map file.

My image isnt working. Is my coding right?
If you followed the guide you did. Chances are your issue is that you are using img inside the [-] rather then imgmap. Try using imgmap.

Last edited by zigbigadorlube; 11-25-2014 at 01:47 AM..

 


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools

 
Forum Jump

no new posts