Você não pode criar um mapa de imagem interativo diretamente no Adobe Illustrator. Os mapas de imagem são usados para definir áreas clicáveis dentro de uma imagem, geralmente para navegar em um site, e exigem um idioma de back -end como HTML e JavaScript para funcionar.
No entanto, você pode
preparar a imagem e definir áreas clicáveis No ilustrador que você pode usar em seu código da web:
1. Prepare sua imagem no ilustrador: * Abra sua imagem no ilustrador.
* Verifique se está no tamanho e resolução desejados do seu site.
*
Vectorize a imagem: Isso o torna escalável sem perder a qualidade. Você pode fazer isso usando o recurso de rastreamento da imagem (Window> Image Trace).
*
Grupo todos os elementos: Selecione todos os elementos da sua imagem e agrupe -os (objeto> grupo) para mantê -los unidos.
2. Defina as áreas clicáveis: *
Use a ferramenta de caneta (P) ou ferramentas de forma: Para criar formas precisas para suas áreas clicáveis.
*
Crie uma nova camada: Isso ajuda a organizar os elementos do seu mapa de imagem.
*
Desenhe as formas em cima da sua imagem: Verifique se as formas estão claramente definidas e correspondem às áreas que você deseja tornar clicável.
*
Nomeie suas formas: Isso será útil quando você escrever seu código HTML. Use nomes significativos que descrevam a área, por exemplo, "Produto-1", "About-Us", "Formulário de contato", etc.
3. Exportar a imagem e as formas: *
Exportar a imagem como um png ou jpg: Esta será sua imagem principal em seu site.
*
Exportar as formas como um arquivo SVG: Isso conterá as informações sobre suas áreas clicáveis.
4. Crie o código HTML e JavaScript: * No seu arquivo html, adicione a tag de imagem para sua imagem exportada.
* Use as tags `map` e` are 'para definir as áreas clicáveis. O atributo `shape` define o tipo de forma (Rect, Circle, Poly) e o atributo 'Coords` define as coordenadas da sua forma (consulte o arquivo SVG para esses valores). O atributo `href` vincula a área a um URL específico.
* Para interações mais complexas, pode ser necessário usar o JavaScript para lidar com os cliques no mapa da imagem.
Exemplo html: `` `html
<área de área ="rect" coords ="10,10,100.100" href ="product-1.html" alt ="Produto 1">>
<área shape ="círculo" coords ="200,200,50" href ="contact.html" alt ="contact">>
`` `
Lembre -se: O código exato dependerá de suas necessidades específicas e da estrutura da web que você está usando. Existem também várias ferramentas de mapa de imagem on -line que podem simplificar o processo.
Esse processo permite criar um mapa de imagens no Illustrator que você pode usar em seu código da Web, tornando suas imagens interativas para os visitantes do seu site.
