Client-side Image Mapping [re-submitted]

An image map is a set of locations within an image (GIF or JPEG).
The locations are a map, which can define active clickable areas which link to URLs.
The clickable areas can be rectangles, circles, and irregular and regular polygons.

I shall be using this image:



1- Create an image such as the one above. (Use JPEG for colorful photographic images, and GIF for line art and text)



2- The image needs rectangular maps to link "Link Uno" thru "Link Cuatro" and "JTFLxtatic", a circle to link Taz's mouth, and a polygon could link from Taz's body.

3- The shapes were drawn on a temporary Photoshop layer. THIS IS ONLY A GUIDE FOR SELECTING THE MAP COORDINATES.



4- Use the graphic above to determine what shape you want to use and what coordinates you will need.



5- Using Photoshop, determine the coordinates needed. This can be accomplished simply by opening the "Info" window.
Make sure the ruler unit is set to read in pixels. This can be set by clicking on the icon next to the X: and Y: coordinates, as shown above.



6- For my image map, I am using Rectangles, a circle and a polygon. Rectangles are defined by the upper right and lower left corners.
Circles use the center and the radius.
Polygons use the connect-the-dots string of all the vertices.

7- Use the following code for the Image map.



In the above example, the top line is the graphic that you are using.
(You can upload a graphic using imageshack.us)
The "area shape=" should be changed to whatever shape you are using, it doesn't have to be exactly how my example is.
Once you find the coordinates for each shape, type it into the "coords".
For "poly" it doesn't matter how you type in the coordinates, as long as it follows (x1,y1), (x2,y2) ...etc
To find the radius for the "circle" coordinates, follow the instructions below.



1- Find the Eyedropper tool icon and right click on it. Select the "Ruler tool" or "Measure tool" (This depends on which version of Photoshop you are using)

2- To open up the "Measurement Log", go to the Menu > Window > Measurement Log (The name may depend on which version of Photoshop you are using)

3- Using the "Ruler tool" or "Measure tool" click on the center of the circle, and then at any side where the circle ends.

4- You should be able to see a line.

5- Going back to the "Measurement Log", click on the button "Record Measurements" and scroll to the right, where you should be given a length. Copy that into the coordinates.

Once you have customized the image map HTML code, you should have something similar to this

If you have any questions, comments, feel free to message me. :)

For anybody using cs3 photoshop (image slicing) here is a great tutorial i used that works on myspace band profiles and normal profiles also!

heres the link to the forum for tutorial:

http://blogs.mysp ace.com/index.cfm?fuseaction=b log.view&friendID=6380726&blog ID=96513181


this code works!!!

here is an online image map tool
http://image-mapper.mgwa lk.com

yea i made my image map and it works perfectly in firefox but in ie it effs up can you help me out?

ok i gt it down and everything but the onl prob is dong the coordantes i will put it down and it will end up somewhere else
please help thank you =]

ya know the rectangels do u just draw them out or do they cum from somewhere?? lol Im so slow am sorrybout this :D

I just cant do the shape bit at all I dont understand can u plz help me!

erm. I have cs3? I just dont get this :P Cos im slow. Can i do it in there Or do i need all the image ready stuff too??

It won't work in myspace because mayspace doens't let you use the '#' symbol in codes.

This doesn't work either. I dunno what I'm doing wrong. But no matter how I try to create an ImageMap, it won't work when I apply the code with the image in my MySpace profile. Websites it works, but in MySpace for some reason the image code that goes right above the map code turns into dots for some reason, and when I try to preview it, it doesn't work at all.

Do you have a solution to this problem?

aww crap ive been doing this through trial and error the whole time lol

Author	membrthetimewthewhipcream
Submitted on	Jan 23, 2008
Page views	12,069
Favorites	24
Comments	10
Reviewer	freeflow
Approved on	Jan 24, 2008

image map, clientside image map, html tutorial