How to Make an Image Map Using Photoshop

Techwalla may earn compensation through affiliate links in this story. Learn more about our affiliate and product review process here.
Engage site visitors with image maps that function like links.
Image Credit: shironosov/iStock/Getty Images

When you click part of a website image and your browser jumps to a different Web page, an image map is probably responsible for that action. Site designers can write HTML code that creates clickable hot spots on any picture. Constructing image maps by hand is time consuming because you must identify the exact coordinates of each hot spot. With the Slice tool in Photoshop, you draw hot spots on an image to generate the HTML code you need automatically.

Advertisement

Create Image Map

Step 1

Launch Photoshop and open an image you want to convert into an image map. Click and hold the "Crop" tool to display a menu containing other tools. Click the "Slice" tool to select it.

Advertisement

Video of the Day

Step 2

Click a point inside the image and drag the Slice tool to draw a bounding box around the part of the image you want to make clickable. Photoshop draws additional "auto slices" around other parts of the image. These auto slices ensure that all parts of an image are included in a slice.

Advertisement

Step 3

Right-click inside the slice you created and select "Edit Slice Options" to open the Slice Options window. Type the URL you want to associate with the slice. You can also replace the default name that Photoshop gave the slice by typing a new one in the "Name" text box.

Advertisement

Step 4

Click "OK" to close the Slice Options window and return to the image. Click another point inside the image and drag the Slice tool to create additional slices as needed.

Adjust Image Map Slices

Step 1

Select the "Slice Select Tool" from the toolbar and click inside a slice you want to move.

Advertisement

Step 2

Hold down the left mouse button and drag the slice to a new location.

Advertisement

Step 3

Hold the mouse cursor over one of the slice's edges and a line with arrows on each end appears. Click that line, hold down the left mouse button and drag the mouse if you need to make the slice bigger or smaller.

Advertisement

Save Image Map

Step 1

Click "File" followed by "Save for Web" to open the Save for Web window.

Step 2

Click "Preset" and select one of the file type options that appear. Choices include GIF 128 Dithered, JPEG High and PNG-24.

Advertisement

Step 3

Click "Save" to open a window that displays your hard drive's files and folders. Browse to the folder where you want to save the image map files and type a name for the image map in the File Name text box.

Step 4

Click the "Format" drop-down menu and select "HTML and Images." Click "Save" to save all files to the folder you specified.

Advertisement

Advertisement

references & resources

Report an Issue

screenshot of the current page

Screenshot loading...