image Map logo

image Map

Published September 2024
   •    Updated April 2026

Plugin details

Image Map is a comprehensive tool that allows you to create and view image maps.
An Image Map is a feature introduced in HTML 3.2 that allows specific regions of an image to be defined as clickable or interactive areas. These regions, known as hotspots, can trigger actions or link to relevant content when users click on them.

Image Maps revolutionized web design by enabling the creation of interactive elements within images. This innovation greatly enhances user engagement and improves navigation on websites. By dividing an image into clickable regions, users can easily access related information, navigate to different sections or pages, or trigger specific actions, all within the context of the image.

This technology has found wide application in various web design contexts. Interactive maps, image-based menus, and clickable infographics are just a few examples of how Image Maps are used to create visually appealing and engaging websites. With image Mapster, website owners can transform static images into dynamic components, offering a more interactive and immersive user experience.

The plugin consists of two elements:
1. ⚙️ imgMapCreator - Html image map editor based on javascript, html5, inline SVG. Simply start by selecting an image from your pc, or load one directly from an external website. Next up create your hot areas using either rectangle, circle or polygon shapes. Creating these shapes is as easy as pointing and clicking on your image. Don't forget to enter data-Keys to identify each area. Next, get the HTML image map that you will use in imgMapViewer.

2. ⚙️ imgMapViewer - activates the areas in HTML image maps so you can highlight and select them. It works just about everywhere that Javascript does, including modern browsers, Internet Explorer 6, and mobile devices like iPads, iPhones and Androids. Allows you to highlight and select areas by color, how floating tooltips for areas or area groups and much more.

🟡 Features:
- Control highlight color and opacity, border, and fade effect on mouseover
- Click-select and deselect one or more areas, or allow highlighing only by disabling isSelectable
- Use like a toggle or menu with the singleSelect option
- Define areas as inactive or always active with staticState
- Show floating tooltips for areas or area groups
- Effortlessly create area-specific tooltips
- Manually activate or deactivate tooltips
- Use grouping and exclusion masks to create complex functionality
- Group areas together into logical entities that will be selected or highlighted together
- Link groups so that activating one group also activates another group using includekeys
- Exclude areas inside of other areas by using masks


🟣 Demo and docs:
https://imagemapster-92465.bubbleapps.io/version-test/demo

🟢 An example and tutorial on using "imgMapViewer" and "imgMapCreator" elements together. Creating, editing, viewing image maps:
https://imagemapster-admin.bubbleapps.io/version-test/admin

Plugin Page:
https://mindforapps.com/plugin_details/image-map

Need help adjusting your new application?
Contact Jay at [email protected]

🛠️ Support
And if you have any questions, reach out to us at [email protected]

We appreciate your reviews and suggestions.

$30

One time  •  Or  $5/mo

stars   •   0 ratings
16 installs  
This plugin does not collect or track your personal data.

Platform

Web

Contributor details

Mind For Apps logo
Mind For Apps
Joined 2018   •   35 Plugins
View contributor profile

Instructions

To create an image map, use the "imgMapCreator" element 1. Place the "imgMapCreator" element on the page and include the "imgUrl" field.
2. Using the buttons (rectangle, circle, poligon) on the top panel, select the shape of the area you want to create. Using the mouse, create areas. Then go to edit mode (the edit button on the top panel), select the desired area (created earlier) and by pressing "ctrl-i" (or double-clicking the left mouse button on this area) call up the auxiliary menu in which you define the "data-key" for this area (if necessary, specify "alt" and "href")
To familiarize yourself with other hot keys, use the "?" button on the top panel.
3. Using the "getImgMap" workflow, get the code of the generated image map. Then, this code will be used in the "imgMapViewer" element (Connects to the "image_map" field)

Next, use the resulting code in the "imgMapViewer" element to view the image map and change various area parameters.
1. Place the “imgMapViewer” element on the page and in the “Image Map” field insert the image map code that was received in the “imgMapCreator” element.
2. Done. You can then adjust other settings as needed and customize the behavior of each area individually if necessary.

More information about using the "imgMapCreator" and "imgMapViewer" elements can be found on the demo and documentation page:
https://imagemapster-92465.bubbleapps.io/version-test/demo

Also look at an example of how our team sees the joint use of the “imgMapCreator” and “imgMapViewer” elements (for example, as an admin page that creates and configures image maps):
https://imagemapster-admin.bubbleapps.io/version-test/admin

Types

This plugin can be found under the following types:
Element   •   Event   •   Action

Categories

This plugin can be found under the following categories:
Technical   •   Media   •   Image   •   Ecommerce   •   Small Business   •   Visual Elements

Resources

Support contact
Documentation
Tutorial

Rating and reviews

No reviews yet

This plugin has not received any reviews.
Bubble