CoffeeCup Image Mapper for Windows

So how does it work? Let's say you're selling furniture with several pieces up for grabs. Showcase the items in a picture. Then using the design tools, draw an outline on a specific item and assign a website address to it. Now when someone clicks on a piece of furniture, they are redirected to the web page associated with it for more information.

Apply the same technique to other types of images like Maps, corporate team photos, flowcharts, art galleries and more. Pretty awesome right? :)

Responsive Image Maps are Friendly for Mobile Users

With over 51% of traffic coming from mobile devices, it's important that you update your image maps to be responsive. This makes them easier, faster, and more functional to navigate for viewers on smaller screens.Image maps that are responsive will adjust link coordinates appropriately based on the display width. However, one thing to keep in mind is that mobile devices do not allow for mouseovers or tooltips on hover/mouseover. Because of this, you will need to creatively re-think how your image map works so users will instinctively know how to use it.

How can you do that? Easy. Make your image map more functional on mobile devices by displaying a "Key" o"Legend" near the map (or even add it to the image itself) which points out textually what they can touch on. For example, here is the furniture catalog that showcases some furniture for sale in the catalog. We placed text below the image to describe the 8 items. An additional indicator was also applied to the source image. These aids help mobile viewers know what is touchable. By touching any of those items, you will be re-directed to a page with where you can browse the catalog for similar items.