Hello fellow Bubblers!
We have recently published a new plugin and would like to share this news with you:
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
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