Plugins
>
Image Map
Image Map
Technical
Small Business
Ecommerce
Image
Media
Plugin details
Image Mapster is a comprehensive tool that allows you to create and view image maps.
Overview & Key Features
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. 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.
2. 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.
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
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. 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.
2. 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.
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
Installation
1
To create an image map, use the "imgMapCreator" element
2
Place the "imgMapCreator" element on the page and include the "imgUrl" field.
3
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.
4
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)
5
Next, use the resulting code in the "imgMapViewer" element to view the image map and change various area parameters.
6
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.
7
Done. You can then adjust other settings as needed and customize the behavior of each area individually if necessary.
8
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
9
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
Need help adjusting your new application?
Support
And if you have any questions, reach out to us at support@mindforapps.com
$50 ONE TIME OR $5/MO
BUY NOW | $50 ONE TIME OR $5/MO
Check it Live
Ready to start your own Project?
More plugins
Start Your Project
What stage are you on?
Exploring
I know the problem I'm solving — I need help building the solution.
Project Brief
You have a brief — we'll turn it into a Bubble build plan.
Full Requirements
Requirements defined — we'll handle UX/UI and Bubble development.
Full Designs
Designs handed off — we will help you bring it to life.