| U kunt geen interactieve beeldkaart direct maken in Adobe Illustrator. Afbeeldingskaarten worden gebruikt om klikbare gebieden binnen een afbeelding te definiëren, meestal voor het navigeren door een website, en ze vereisen een backend -taal zoals HTML en JavaScript om te functioneren.
U kunt echter de afbeelding voorbereiden en klikbare gebieden definiëren In Illustrator die u vervolgens in uw webcode kunt gebruiken:
1. Bereid uw afbeelding voor in illustrator:
* Open uw afbeelding in Illustrator.
* Zorg ervoor dat het op de gewenste maat en resolutie voor uw website is.
* Vectoriseer de afbeelding: Dit maakt het schaalbaar zonder kwaliteit te verliezen. U kunt dit doen met behulp van de afbeeldingsfunctie van de afbeelding (venster> Afbeelding Trace).
* groeperen alle elementen: Selecteer alle elementen in uw afbeelding en groepeer ze (object> groep) om ze bij elkaar te houden.
2. Definieer de klikbare gebieden:
* Gebruik het gereedschap Pen (P) of vormtools: Om precieze vormen te maken voor uw klikbare gebieden.
* Maak een nieuwe laag: Dit helpt bij het organiseren van uw afbeeldingskaartelementen.
* Teken de vormen bovenop uw afbeelding: Zorg ervoor dat de vormen duidelijk zijn gedefinieerd en komen overeen met de gebieden die u wilt klikken.
* Noem uw vormen: Dit zal handig zijn wanneer u uw HTML -code schrijft. Gebruik betekenisvolle namen die het gebied beschrijven, bijvoorbeeld "Product-1", "Over-US", "Contact-vorm", enz.
3. Exporteer de afbeelding en vormen:
* Exporteer de afbeelding als een PNG of JPG: Dit wordt uw hoofdafbeelding op uw website.
* Exporteer de vormen als een SVG -bestand: Dit bevat de informatie over uw klikbare gebieden.
4. Maak de HTML- en JavaScript -code:
* Voeg in uw HTML -bestand de afbeeldingstag toe voor uw geëxporteerde afbeelding.
* Gebruik de tags `Map` en` Area` om de klikbare gebieden te definiëren. Het attribuut `vorm` definieert het type vorm (rect, cirkel, poly) en het kenmerk` coörds` definieert de coördinaten van uw vorm (raadpleeg het SVG -bestand voor deze waarden). Het kenmerk `href` koppelt het gebied aan een specifieke URL.
* Voor meer complexe interacties moet u mogelijk JavaScript gebruiken om de klikken op de afbeeldingskaart te verwerken.
Voorbeeld html:
`` `html
`` `
Onthoud: De exacte code is afhankelijk van uw specifieke behoeften en het webraamwerk dat u gebruikt. Er zijn ook verschillende online afbeeldingen voor beeldkaart die het proces kunnen vereenvoudigen.
Met dit proces kunt u een afbeeldingskaart maken in Illustrator die u vervolgens in uw webcode kunt gebruiken, waardoor uw afbeeldingen interactief zijn voor bezoekers van uw website. |
