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. This article will guide you through the steps necessary to create a basic image map using Adobe Photoshop.

Difficulty: Moderately Challenging

Instructions

Things You'll Need:

• Adobe Photoshop
• Sample image

How to Make an Image Map Using Photoshop

1. Using Photoshop, open the image you will be using to create your image map. This 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. To access the Image Map tool, either press the letter "P" or select the "Image Map" tool icon located on the standard toolbox. 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 'hotspot'.

4. Using your mouse, click on the image and highlight the 'hotspot' 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 'hotspot' 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. The available options are as follows:Name - Use this option to name the 'hotspot'URL - Use the drop-down box to highlight a local page or type in the address of an external web page that will be access via this 'hotspot'Target - Use the drop-down box to highlight how your external link will be opened.Alt - This area will contain the text that will be shown when a mouse pointer is placed over this 'hotspot'.

6. Use the 'Dimensions' options to fine tune the position and size of your 'hotspot'. 'X' & 'Y' - Designates the exact location of your 'hotspot' using vertical and horizonal pixels.'W' & 'H' - Allows you to define the size of your 'hotspot' using a number of pixels.

7. Go back and repeat Steps 4, 5 & 6 for each 'hotspot' you want to create.

8. When you are finished creating 'hotspots', 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 'hotspots'.
• 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 'hotspots' by right-clicking the 'hotspot' layer in the Web Content toolbox
• Be descriptive when naming your 'hotspots' for later reference.
• Don't overlap 'hotspots', as this will create issues with accessing the links on the lower layer.
• Limit the number of 'hotspots' on one page to avoid confusing or cluttered pages.

Resources

• Definition of Image Maps
• Adobe Photoshop Reference

[mintsauce]

on 11/8/2009 This DOES NOT create an image map, it creates a table of many images.

Read your own link to the definition of image maps: "an image map is a list of coordinates relating to a specific image."