Client-side Image Mapping [re-submitted]

HTML Tutorials

Tutorial

Click on thumbnailed images to enlarge

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. :)

Tutorial Comments

Showing latest 10 of 10 comments

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!!!

By jaymoragne on Jul 24, 2009 12:14 am

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

By mgwalk on Aug 21, 2008 2:54 pm

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

By Shepryan007 on Jun 21, 2008 12:02 am

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 =]

By amanduhcakez on May 25, 2008 2:47 pm

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

By YunasOtherSelf on May 14, 2008 9:50 am

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

By YunasOtherSelf on May 14, 2008 9:42 am

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??

By YunasOtherSelf on May 14, 2008 9:35 am

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

By marrionette on Mar 10, 2008 10:52 pm

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?

By CreativeArticulate on Feb 7, 2008 10:19 am

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

By butre on Feb 3, 2008 9:45 pm

Tutorial Details

Author membrthetimewthewhipcream View profile
Submitted on Jan 23, 2008
Page views 10,622
Favorites 24
Comments 10
Reviewer freeflow View profile
Approved on Jan 24, 2008