Create image maps for web graphics

Image maps enable you to link specific areas of your artwork—called hotspots—to URLs without dividing your design into multiple files. When a user clicks a hotspot in a web browser, the linked page or resource loads. This approach is ideal when you want to maintain your artwork as a single image file while creating multiple clickable regions.

Image maps work differently from slices. While both techniques create clickable links in web graphics, slices divide your artwork into separate image files during export. Image maps preserve your design as one file, making them simpler to manage when you don't need the optimization benefits of slicing.

• Adobe Illustrator installed on your computer
• Vector artwork prepared for web use
• Target URLs identified for each clickable region

Understanding image map shapes

Adobe Illustrator offers two shape options for image map hotspots: polygonal and rectangular. Polygonal hotspots follow the contours of complex shapes, while rectangular hotspots create simple bounding boxes around objects. Choose the shape that best matches your artwork's geometry.

If you only need rectangular clickable areas, consider using slices instead. Slices offer additional optimization options and can help reduce file sizes for complex web graphics. Learn more about slices and image maps.

Create a hotspot and link it to a URL

After creating your image maps, export your artwork using File > Save for Web. The export process embeds the hotspot coordinates and URLs in the resulting HTML file, making the clickable regions functional when viewed in a web browser.

Avoid conflicts between image maps and slices

Don't create image map hotspots on slices that already contain URL links. Some web browsers may ignore either the image map links or the slice links when both are present, resulting in broken navigation for your users.

For best results, choose one linking method per artwork region. Use image maps for designs that should remain as single image files, or use slices when you need to optimize different areas with different compression settings. Review best practices for creating web graphics to determine the optimal approach for your project.