How Does it Work?
With the help of our generator, creating HTML image maps is free and easy. Simply start by selecting an image from your PC, or load one directly from an external website. Next, create your hot areas using Rectangle, Circle, Polygon, or the exclusive Custom Shape tool. Once drawn, just drag a shape to reposition it. Enter a link, title and target for each area, then click Show Me The Code.
What is an Image Map?
Originally introduced in HTML 3.2 as a replacement for server-side image maps. Server-side image maps were clunky, requiring a round trip to the web server to determine where to go based on the coordinates clicked in the image. Thus client-side image maps were born!
An image map is a graphic image where a user can click on different parts of the image and be directed to different destinations. Image maps are made by defining each of the hot areas in terms of their x and y coordinates (relative to the top left corner). With each set of coordinates, you specify a link that users will be directed to when they click within the area.
As an example, say you have a map of the World that you wish to act as an image map. Each country could have their hot areas defined on the map to take you to different pages.
About
We make it extremely easy to create free HTML-based image maps. Our tool was built from the ground up with modern browsers in mind, and sadly in turn doesn't support older browsers (sorry IE8 and lower!). All operations are completely client side in your browser using the power of HTML5, SVG and JavaScript.
Disclaimer: No image from your PC is ever transferred out of your browser. All files loaded from your PC are read using the FileReader JavaScript API directly off your hard drive into your browser.
This tool adds an exclusive Custom Shape option — draw any freehand polygon directly on your image for maximum flexibility.