|
Vous ne pouvez pas créer une carte d'image interactive directement dans Adobe Illustrator. Les cartes d'image sont utilisées pour définir des zones clickables dans une image, généralement pour naviguer sur un site Web, et ils nécessitent un langage backend comme HTML et JavaScript pour fonctionner.
Cependant, vous pouvez préparer l'image et définir les zones clickables Dans Illustrator que vous pouvez ensuite utiliser dans votre code Web:
1. Préparez votre image dans Illustrator:
* Ouvrez votre image dans Illustrator.
* Assurez-vous que c'est à la taille et à la résolution souhaitées de votre site Web.
* Vectorisez l'image: Cela le rend évolutif sans perdre de qualité. Vous pouvez le faire en utilisant la fonction de trace d'image (fenêtre> Trace d'image).
* Groupe tous les éléments: Sélectionnez tous les éléments de votre image et regroupez-les (objet> groupe) pour les garder ensemble.
2. Définissez les zones cliquables:
* Utilisez l'outil stylo (P) ou les outils de forme: Pour créer des formes précises pour vos zones cliquables.
* Créez un nouveau calque: Cela aide à organiser vos éléments de carte d'image.
* Dessinez les formes sur votre image: Assurez-vous que les formes sont clairement définies et correspondent aux zones que vous souhaitez rendre cliquables.
* Nommez vos formes: Cela sera utile lorsque vous rédigerez votre code HTML. Utilisez des noms significatifs qui décrivent la zone, par exemple, "Product-1", "About-US", "Contact-Form", etc.
3. Exporter l'image et les formes:
* Exportez l'image en PNG ou JPG: Ce sera votre image principale sur votre site Web.
* Exportez les formes en tant que fichier SVG: Cela contiendra les informations sur vos zones cliquables.
4. Créez le code HTML et JavaScript:
* Dans votre fichier HTML, ajoutez la balise d'image pour votre image exportée.
* Utilisez les balises «Map» et «Area» pour définir les zones cliquables. L'attribut «Shape» définit le type de forme (RECT, Circle, Poly) et l'attribut «Coords» définit les coordonnées de votre forme (reportez-vous au fichier SVG pour ces valeurs). L'attribut `HREF` relie la zone à une URL spécifique.
* Pour des interactions plus complexes, vous devrez peut-être utiliser JavaScript pour gérer les clics sur la carte de l'image.
Exemple HTML:
`` HTML
`` '
Rappelez-vous: Le code exact dépendra de vos besoins spécifiques et du cadre Web que vous utilisez. Il existe également divers outils de carte d'image en ligne qui peuvent simplifier le processus.
Ce processus vous permet de créer une carte d'image dans Illustrator que vous pouvez ensuite utiliser dans votre code Web, ce qui rend vos images interactives pour les visiteurs de votre site Web.
|
