Menu

SVG interattivi con Adobe Illustrator

Torna alle news
15/04/2015
Tecnologie, Web design, JavaScript, Web, Grafica

Come già scritto nel precedente articolo di Sharon Bertin SVG è il futuro, con l'aumento dei diversi dispositivi utilizzati per navigare sul web è sempre più importante valersi di buone e aggiornate pratiche di web design: ecco perchè sono entrate in gioco le immagini SVG.
Oltre ai vantaggi già elencati precedentemente, queste immagini garantiscono la possibilità di interazioni Javascript attraverso l'utilizzo di Adobe Illustrator, in 3 semplici mosse:

1. Selezionare l'Oggetto

Selezionare un oggetto direttamente sulla tavola o attraverso la palette Livelli.
Dopodichè dovete andare su Finestra >   Interattività SVG
 

2. Creare l'evento

Ora abbiamo bisogno di aggiungere un evento al nostro oggetto.
Questo evento determinerà le circostanze in cui la nostra azione JavaScript avrà effetto. Scegliamo l'evento desiderato nell'apposita Select nella palette Interattività SVG.
In questo caso abbiamo scelto di utilizzare l' onmouseover.



Nella casella di testo JavaScript, abbiamo scritto un comando JavaScript che sarà attivato dall'evento selezionato. In questo caso abbiamo aggiunto


Premere Invio per aggiungere la voce alla lista degli eventi.

3. Utilizzare il file XML

Dopo aver salvato il nostro file, possiamo procedere a copiare ed incollare direttamente nella nostra pagina web il codice XML generato da Illustrator, che sarà simile a quanto segue:



Aprendo la nostra pagina direttamente nel browser, vedremo che al passaggio del mouse sopra la nostra immagine apparirà il nostro alert "hello"!
 

4.Eliminazione di un evento JavaScript

Nella palette Interattività SVG, cliccare su un evento JavaScript per evidenziarlo, e in un secondo momento cliccare sul cestino in basso a destra.

Metti un like

Altri articoli che ti potrebbero interessare

SVG è il futuro

Vuoi saperne di più? Contattaci subito!

Privacy Policy
Ho letto e autorizzo il trattamento dei miei dati personali.


Invia

Non perderti le nostre news

Privacy Policy
Ho letto e autorizzo l'invio della newsletter.