Responsive Image Map Creatorimage Map Creating Tool

Posted on by



You can easily and quickly create responsive image maps to embed into responsive website, it makes your website look good on all devices (desktops, mobiles, tablets). You can create the interactive image as usual and generate the embed code or link with our responsive options.

Preview and Publish

  1. Preview the fixed size map with Fixed Size button in preview section
  2. Preview the responsive map with Responsive button in preview section
  3. Please also refer to publish and upload map user guide.

Embed Code

  1. Select Responsive Map options in embed code section
  2. Copy the embed code and paste to responsive webpage.
  3. To embed into website, blog or cms, please click here.

Instant Sharing

Use the ImageMap control to create an image that contains defined hot spot regions. When a user clicks a hot spot region, the control can either generate a postback to the server or navigate to a specified URL. For example, you can use this control to display a map of a geographical region. Learn how to create an responsive image with CSS. Responsive images will automatically adjust to fit the size of the screen. Resize the browser window to see the responsive effect.

  1. Map share link and the embed code would be generated.
  2. Select Responsive Map options if necessary.
  3. Share the link to others or paste the map embed code into the editing page of your website / various CMS editors.
  4. In shared interactive image, we provide one-click social network buttons (facebook, twitter, google plus).

[ Back ]

imageMaps.js is a jQuery based image map code generator that allows you to dynamically add draggable, editable image maps with custom links to an image you provide.

Responsive Image Map Creatorimage Map Creating Tool

Works on responsive web design that automatically adjust the size & position of the image map depending on the current window size.

Responsive Image Map Creatorimage Map Creating Tools

How to use it:

1. Download and put the jquery.imagemaps.js script after jQuery.

Image Map Maker

2. Load the jQuery UI for the draggable functionality.

3. Insert an image to the webpage.

4. Create controls for the image map code generator.

5. Call the function on the image wrapper to initialize the image map code generator.

Image Map Creator

6. Get the HTML code from the existing image maps.

7. All default settings for the image map code generator.

8. The plugin also works with images with pre-defined image maps.

This awesome jQuery plugin is developed by Tiacx. For more Advanced Usages, please check the demo page or visit the official website.

Responsive Image Map Creatorimage Map Creating Tool Template

  • Prev: Paginate Any Block Elements With jQuery smpPagination Plugin
  • Next: Arrow Indicator For Tabbed Content - jQuery ArrowTabs