Immagini Università della Tuscia - Facoltà di Scienze Politiche. Informatica 2 - a.a. 2006-2007 - Prof. Francesco Donini 1 HTML - immagini <IMG SRC=“...” (source) file dell’immagine NAME=“...” nome interno WIDTH=“...” larghezza HEIGHT=“...” altezza ALT=“...” testo alternativo BORDER=“...”> Università della Tuscia - Facoltà di Scienze Politiche. Informatica 2 - a.a. 2006-2007 - Prof. Francesco Donini 2 L’attributo SRC L’attributo SRC contiene un percorso che specifica il file immagine da inserire <IMG SRC=”/immagini/foto1.gif"> Università della Tuscia - Facoltà di Scienze Politiche. Informatica 2 - a.a. 2006-2007 - Prof. Francesco Donini 3 Esempio per SRC <IMG SRC=”/immagini/foto1.gif" NAME=”ritratto1"> Cartella immagini documento File foto1.gif Università della Tuscia - Facoltà di Scienze Politiche. Informatica 2 - a.a. 2006-2007 - Prof. Francesco Donini 4 Un’immagine è un oggetto Le proprietà sono .src, .alt, .height, … etc. (gli attributi di IMG) La proprietà .src è modificabile dopo che la pagina è stata visualizzata Questo permette effetti dinamici di “cambio immagine” (rollover, animazione) Università della Tuscia - Facoltà di Scienze Politiche. Informatica 2 - a.a. 2006-2007 - Prof. Francesco Donini 5 Il Document Object Model window document ritratto1 src Università della Tuscia - Facoltà di Scienze Politiche. height width Informatica 2 - a.a. 2006-2007 - Prof. Francesco Donini 6 Oggetti di tipo image Costruttore dell’oggetto: metodo Image() Dichiarazione/definizione: • var foto1 = new Image( ); • foto1.src = "immagini/ritratto1.jpg" Università della Tuscia - Facoltà di Scienze Politiche. Informatica 2 - a.a. 2006-2007 - Prof. Francesco Donini 7 Proprietà height, width Le proprietà height (altezza) e width (larghezza) sono modificabili da script Modificandole, si modifica la visualizzazione della pagina html Università della Tuscia - Facoltà di Scienze Politiche. Informatica 2 - a.a. 2006-2007 - Prof. Francesco Donini 8 Proprietà src Modificando la proprietà src di un'immagine, cambia l'immagine visualizzata Esempio: • ritratto1.src = "/immagini/foto2.jpg" Università della Tuscia - Facoltà di Scienze Politiche. Informatica 2 - a.a. 2006-2007 - Prof. Francesco Donini 9 Rollover Se la proprietà src di un'immagine si modifica sugli eventi onMouseOver e onMouseOut, si ottiene un effetto detto di Rollover Università della Tuscia - Facoltà di Scienze Politiche. Informatica 2 - a.a. 2006-2007 - Prof. Francesco Donini 10 Precaricamento delle immagini Le immagini occupano molta più memoria del testo html A seconda delle dimensioni dei file immagine e della connessione, la trasmissione può prendere molto tempo Per ottenere effetti immediati, è bene precaricare le immagini con uno script nella HEAD della pagina Università della Tuscia - Facoltà di Scienze Politiche. Informatica 2 - a.a. 2006-2007 - Prof. Francesco Donini 11