Things You'll Need:
- Computer Photoshop
-
Step 1
Start Photoshop if your image is not already a Photoshop document. Select "File," click "Open" and browse to the image you want to turn into an image map. Then click the "Send to ImageReady" button at the bottom of the toolbar.
-
Step 2
Start ImageReady. Select "File," click "Open" and browse to the PSD document you saved. If you want to make any changes to the size of the image so it better fits your web page, use the "Image Scale" and "Canvas Size" to make the changes.
-
Step 3
Select the "Image Map" tool from the toolbar. The initial shape is elliptical, but right-clicking on the tool gives you other shape options, such as rectangular. Hold down the mouse button and drag the shape over the spot where you would like to place the first hyperlink on the image map. Then go to the bottom right on the screen and type in the name for the image and the hyperlink address you want it to go to when clicked.
-
Step 4
Repeat step 3 for each section you want to add a hyperlink to. Click "File" and then "Save as Optimized." In the dialog that opens, name the file and save it in the "HTML and Images" format. And you are done.
Comments
tdjprj said
on 7/28/2009 An easier way to do image map is to use clickable flash maps -- check out http://www.imapbuilder.com. The software can import any image file, convert it to flash, and add clickable points and regions, with icons, mouseover tooltips, etc