JM Image map Module 1.0.0

The JM Image Map module is a powerful and intuitive solution for creating interactive image maps on your Joomla website with a visual drag & drop editor, 150+ icons, and beautiful tooltip bubbles.

This module offers a user-friendly visual editor, extensive Font Awesome icon library, custom color options per hotspot, and smooth animations that allow web developers and site administrators to create engaging interactive images that seamlessly integrate with their website's design. Here's a comprehensive guide to utilizing the JM Image Map module effectively.

1. Visual Drag & Drop Editor

Click to Add Hotspots: Simply click anywhere on your image to instantly create a new interactive hotspot.
Drag to Reposition: Grab and drag hotspots to precisely position them anywhere on your image with pixel-perfect accuracy.
Live Preview: See exactly how your image map will look as you build it, with real-time updates in the admin interface.
Edit Modal: Click any hotspot to open a clean, organized modal with all configuration options in one place.

2. Extensive Icon Library (150+ Icons)

Visual Icon Picker: Browse and select from 150+ Font Awesome icons with a beautiful visual picker interface.
14 Organized Categories: Icons grouped by purpose - Navigation, Communication, Social, Business, Shopping, Media, Time, Actions, Status, Transportation, Food, Technology, Weather, and Health.
Instant Preview: See icons rendered in real-time as you select them in the picker.
Custom Icon Support: Manually enter any Font Awesome icon class for unlimited possibilities.

3. Custom Color Per Hotspot

Individual Colors: Set unique colors for each hotspot to create color-coded interactive maps.
Visual Color Picker: Choose colors with an intuitive color picker or enter hex codes directly.
Global Defaults: Define default icon and hover colors that apply to all hotspots without custom colors.
Reset to Default: One-click button to remove custom colors and use module defaults.

4. Beautiful Tooltip Bubbles

Custom CSS Tooltips: Modern, animated tooltip bubbles that appear on hover with smooth transitions.
Arrow Indicators: Tooltips include a small arrow pointing to the hotspot for clear visual connection.
Dark Theme: Semi-transparent black background with white text ensures readability on any image.
Auto-Positioning: Tooltips automatically position above hotspots to avoid covering content.
Optional Display: Enable or disable tooltips globally with a simple toggle.

5. Professional Styling

Circular Hotspots: Perfect circles with icons centered inside for a clean, modern look.
White Border: 2px white border ensures visibility on any background image.
Drop Shadow: Subtle shadow effect adds depth and makes hotspots stand out.
Hover Effects: Hotspots scale up 1.2x and darken on hover for clear interactive feedback.

6. Import/Export Functionality

JSON Export: Export all hotspot configurations to JSON format for backup or reuse.
JSON Import: Import previously exported configurations or create hotspots programmatically.
Bulk Operations: Quickly duplicate hotspot configurations across multiple modules.
Easy Migration: Transfer hotspot configurations between development and production sites.

and more....