Guide › Guida Illustrator CS

Tutorial - Creare una piantina originale (3a parte)

Ora poniamo di voler rendere interattiva la piantina ad esempio rendendo cliccabile la zona in rosso che segnala la sede linkandola ad esempio ad una pagina con le foto della facciata del palazzo o con l'insegna.

Possiamo farlo senza uscire mai da Illustrator.
Selezioniamo l'ellisse rossa e il baloon, apriamo la palette Attributi e scegliamo nella casella Mappa la voce Poligono e scriviamo nella casella URL l'indirizzo della pagina con le foto dell'azienda.
mappa immagine

Per rendere tutto operativo non ci resta che salvare per il web il nostro lavoro.
Apriamo la finestra di Salva per Web dal menù File.
Impostiamo le opzioni di ottimizzazazione, date le caratteristiche dell'immagine salvare in gif a 64 colori ci permette di ottenere un buon compromesso qualità peso.
Ecco le impostazioni che abbiamo utilizzato:
ottimizzazione

Quando tutto è pronto clicchiamo sul pulsante Salva, scegliamo una cartella in cui salvare, diamo un nome al file (in uqesto caso abbiamo lasciato il nome “map”) e ricordiamoci di settare “HTML e immagini” nella casella Salva come.
Confermate cliccando sul Pulsante Salva di questa finestra.
Ora nella cartella scelta troviamo due diversi file:
  1. Un'immagine map.gif ottimizzata coi parametri richiesti
  2. Un file map.html che contiene il codice HTML della mappa immagine:
<HTML>
<HEAD>
<TITLE>map</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
</HEAD>
<BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>
<!-- ImageReady Slices (map.ai) -->
<IMG src="images/map.gif" WIDTH=503 HEIGHT=419 BORDER=0 ALT="" USEMAP="#map_Map">
<MAP NAME="map_Map">
<AREA SHAPE="poly" ALT="" COORDS="274,238, 250,298, 274,267, 410,267, 410,238, 274,238" href="http://www.html.it">
<AREA SHAPE="poly" ALT="" COORDS="266,304, 258,309, 247,308, 238,301, 237,292, 244,287, 256,288, 265,296, 266,304" href="http://www.aziendataldeitali.it/foto.jpg">
</MAP>
<!-- End ImageReady Slices -->
</BODY>
</HTML>
Aprendo con il browser map.html possiamo vedere la nostra immagine cliccabile.

Valid html - Note sul copyright - Segnala errori - Cookie policy