Scarica presentazione originale

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