How to Make an Image Map Using Photoshop

Image maps provide a great deal of flexibility when it comes to navigation and allow you to create professional looking web pages. Simply put, image maps allow the programmer to designate "hot spots" within an image that become clickable links to other pages, sounds, animations or videos. These links replace traditional buttons and provide a more interesting experience for site visitors. Image maps can also provide visual navigation for users who might have issues with plain text buttons or links. You can create a basic image map using Adobe Photoshop.

Difficulty:

Moderately Challenging

Instructions

1. Open the image you will be using to create your image map in Photoshop. The image should be already optimized for the Web.

2. Access the ImageReady component of Photoshop by pressing Shift+Ctrl+M or clicking on the "Edit in ImageReady" button at the bottom of your toolbox.

3. Press the letter P or select the "Image Map" tool icon located on the standard toolbox to access the Image Map tool. Holding down the left mouse button while hovering over this selection will open an option box that will allow you to choose rectangle, circle or polygon shapes. Choose the shape that will best fit the area of the image that you want to use as a "hot spot."

4. Using your mouse, click on the image and highlight the hot-spot area by dragging the mouse while pressing down on the left mouse button. When you stop and release the button, ImageReady will create a new hot spot on your image.

5. Open the image map options box by clicking on "Window" in the main toolbar and then clicking on "Image Map" in the drop-down menu. Use the "Name" option to name the hot spot. Use the "URL" drop-down box to highlight a local page or type in the address of an external web page that will be accessed via this hot spot. Use the "Target" drop-down box to highlight how your external link will be opened. The "Alt" area will contain the text that will be shown when a mouse pointer is placed over this hot spot.

6. Use the "Dimensions" options to fine-tune the position and size of your hot spot. X and Y designate the exact location of your hot spot using vertical and horizontal pixels. W and H allow you to define the size of your hot spot using a number of pixels.

7. Repeat steps 4, 5 and 6 for each hot spot you want to create.

8. Press Ctrl+Shift+Alt+S or select "Save Optimized As" from the "File" drop-down menu. Enter a file name and be sure that "HTML and images" is shown in the "Save as type" section. Click "Save" to complete the file-saving process. This will create an HTML file and associated folder for images.

9. Click on the newly created HTML file to test the operation of your new image map.

Tips & Warnings

• Use the rectangle, circle or polygon options to create odd-shape hot spots.

• Be sure to start with an image that has already been optimized for the Web. This will reduce loading time.

• Create "rollover" states for your hot spots by right-clicking the "hotspot" layer in the Web Content toolbox

• Be descriptive when naming your 'hotspots' for later reference.

• Don't overlap hot spots, as this will create issues with accessing the links on the lower layer.

• Limit the number of hot spots on one page to avoid confusing or cluttered pages.

References

• Create Blog: Photoshop Image Maps
• Depiction: Photoshop Image Maps

Resources

• Adobe Photoshop Reference