🚀 [NEW PLUGIN] Image Map

Hello fellow Bubblers!
We have recently published a new plugin and would like to share this news with you:

Frame 137

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.

demo1

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.

demo2

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

demo3

demo4

demo5

Plugin page:

Plugin details:

Demo and docs:

An example and tutorial on using “imgMapViewer” and “imgMapCreator” elements together. Creating, editing, viewing image maps:

Need help adjusting your new application?
Contact Jay at contact@mindforapps.com

Support
And if you have any questions, reach out to us at support@mindforapps.com

We appreciate your reviews and suggestions.

Cheers
Jay | Mindforapps

This is very impressive!

In one of the example images it looks like you can highlight objects, thus making it a custom shape? Is this correct?

Hello!

You can define the contours of the selected (highlighted) areas yourself. Next, you can either select the created areas by clicking the mouse (select) or by hovering (highlight). There are separate style settings for “select” and “highlight”. In addition, you can programmatically (via the workflow) select areas.

You can do all this yourself on our test page, which we specially created so that users could test the capabilities of this plugin live.

An example and tutorial on using “imgMapViewer” and “imgMapCreator” elements together. Creating, editing, viewing image maps:

This is a fully functional page where you can upload your own image, create an image map for it (create the areas you need) and then customize the styles of these areas.

We specially created this test page so that users could test the capabilities of our plugin live.
We have placed a small manual at the bottom of this test page: Description/Manual.

Please read the manual and try to upload your image, create and customize the image map and you will see how easy it is.

Good luck.