 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
- Open your
image in Adobe Photoshop.
- You'll
need to show the Info Pallette. To do this, go to Window -> Show Info.
- You'll
also need to set the unit measurement to pixels. To do this, go to File
-> Preferences ->Units & Rulers....
- Choose
pixels for the Units in the Rulers section. (Click OK)
- Select
the Marquee Tool. This button is in the upper left hand corner of the
Photoshop toolbar.
-
Decide on the part of the image that you would like to be clickable. There are 4 different shapes that HTML allows you to code. The diagram below demonstrates the different shapes and the coordinates you wil need for each one.
-
Record the coordinates by placing the Marquee tool over the required points. The info pallette will then display the coordinates in pixels.
- Now you
need to add the html code. To define a map and its coordinates, follow
this example:
<MAP NAME="mapname">
<AREA SHAPE="rect" HREF="page1.html" COORDS="x1,y1,x2,y2">
<AREA SHAPE="circle" HREF="page2.html" COORDS="x1,y1,r">
<AREA SHAPE="point" HREF="page3.html" COORDS="x,y">
<AREA SHAPE="polygon" HREF="page4.html" COORDS="x1,y1,x2,y2,x3,y3,x4,y4">
</MAP>
- Lastly,
you must assign the map to your image by simply adding code to your
IMG tag:
<IMG SRC="image.gif" USEMAP="#mapname">