- Compatibilidade com Joomla
- 4.x
- 5.x
- 6.x
O módulo JM Image Map é uma solução poderosa e intuitiva para criar mapas de imagens interativos em sua página web Joomla com um editor visual arrastar & soltar, 150+ ícones e bocados de pop-up bonitos.
Este módulo oferece um editor visual amigável, uma biblioteca extensa de ícones Font Awesome, opções de cor personalizadas por hotspot e animações suaves que permitem aos desenvolvedores web e administradores de site criar imagens interativas engajantes que se integram perfeitamente com a sua design da página web. Aqui está um guia completo para utilizar efetivamente o módulo JM Image Map.
1. Editor Visual de Arrastar & Soltar
Clique para Adicionar Hotspots: Simplesmente clique em qualquer parte da imagem para criar instantaneamente um novo hotspot interativo.
Arraste para Reporcionar: Agarrar e arrastar os hotspots para posicionar exatos onde você deseja na sua imagem com precisão pixel-perfect.
Pré-visualização ao Vivo: Veja como a sua imagem mapa vai ficar enquanto constrói-a, com atualizações em tempo real no interface administrativo.
Modo de Edição Modal: Clique em qualquer hotspot para abrir um modal limpo e organizado com todas as opções de configuração em uma única localização.
2. Biblioteca Extensa de Ícones (150+ Ícones)
Seletor Visual de Ícone: Procure e selecione 150+ ícones Font Awesome com um seletor de interface visual bonita.
14 Categorias Organizadas: Ícones agrupados por propósito - Navegação, Comunicação, Social, Negócios, Compras, Mídia, Tempo, Ações, Status, Transporte, Alimentos, Tecnologia, Clima e Saúde.
Pré-visualização Instantânea: Veja ícones renderizados em tempo real enquanto seleciona-os no seletor.
Suporte Ícone Personalizado: Inserir manualmente qualquer classe de ícone Font Awesome para possibilidades ilimitadas.
3. Opções de Cor Personalizadas por Hotspot
Cores Individuais: Definir cores únicas para cada hotspot para criar mapas interativos coloridos.
Seletor Visual de Cor: Escolha cores com um intuitivo seletor de cor ou insira códigos hex diretamente.
Definições Globais de Cor: Definir cores padrão do ícone e de hover que aplicam a todos os hotspots sem customizações de cores.
Reset para o Padrão: Botão um clique para remover as customizações de cor e usar as definições do módulo.
4. Bocados de Pop-up Bonitos
Tooltip com CSS Personalizado: Pop-ups modernos e animados que aparecem ao passar o mouse com transições suaves.
Indicadores de Arroba: Pop-ups incluem um pequeno indicador apontando para o hotspot para conexão visual clara.
Tema Escuro: Fundo semi-transparente preto com texto branco garante leitura em qualquer imagem.
Posicionamento Automático: Pop-ups posicionam-se acima dos hotspots para evitar cobrir conteúdo.
Disponibilidade Alternativa: Habilitar ou desabilitar pop-ups globalmente com um simples toggle.
5. Estilo Profissional
Hotspots Círculares: Círculos perfeitos com ícones centrados dentro para uma aparência limpa e moderna.
Borda Branca: 2px borda branca garante visibilidade em qualquer imagem de fundo.
Efeito Sombra: Efeito de sombra suave adiciona profundidade e faz os hotspots destacarem.
Efeitos ao Hover: Hotspots escalonam-se para 1.2x e escuram ao hover para feedback interativo claro.
6. Função de Importação/Exportação
Exportar JSON: Exportar todas as configurações do hotspot para formato JSON para backup ou reutilização.
Importar JSON: Importar configurações exportadas previamente ou criar hotspots programaticamente.
Operações em Massa: Duplicar rapidamente as configurações de hotspot entre múltiplos módulos.
Transferência fácil: Transferir configurações de hotspot entre sites de desenvolvimento e produção.
