Advanced: Image Maps

Use image maps to make logos (or other areas) clickable on an image.

Pete Zimek, CAE avatar
Written by Pete Zimek, CAE
Updated over a week ago

Image maps are simply areas in an image that are hyperlinked. To the user, it seems like the link is in the specific area of the picture. On the backend, an image map is actually two parts made up of an image and a separate map of defined link areas on top. 

Image maps are a great way to make any logo or image clickable. 

Novi sites are responsive to image maps placed anywhere and automatically adjust to different screen sizes. You can insert the image maps into your CMS pages. 

Making an Image Map

Here are a couple tools that allow you to build an image map without having to deal with creating all the coordinates in the map:

This isn't the only option for creating image maps, but it's one of the easiest. Learn more about image maps here: http://html.com/images/how-to-make-an-image-map/.

AE Tip™: Image map technology doesn't always play nice with modern "save for retina" functionality. Instead of saving files at 2x resolution, it is easier to manually do the calculation and save the files at literally double the needed size. When they shrink back down, you'll have a retina quality image and an image map that works.

Did this answer your question?