Rinaldi Annamaria web design realizzazione ottimizzazione siti internet Modena

immagine grafica web

 

home | grafica | webdesign | fotografia | partners | contatti | ospiti

 



Il caricamento progressivo

Questa versione di PTViewer puo caricare progressivamente un panorama diviso in un certo numero di sezioni (slices). Ogni sezione viene caricata come un ROI ovvero regione d'interesse (region of interest).
Questa funzione migliora la visione dell'utente quando si usano immagini grandi perchè il tempo di caricamento iniziale durante il quale non si vede ancora l'immagine viene sensibilmente ridotto.

I Roi possono essere realizzati con softwere appositi (ad esempio CreateROI V 1.0 puoi scaricarlo dalla pagina "http://www.fototoscana.it/ptviewer"), oppure anche con Photoshop o qualsiasi programma per le immagini raster che permetta di selezionare parti dell'immagine, copiarle ed incollarle in file distinti, nominati roi0, roi1, ecc.

Questo è un esempio commentato di un codice HTML necessario a caricare un panorama progressivamente:

<param name=virtual value="panoramica-alpe-s.jpg">
Specifica una immagine a bassa risoluzione che viene caricata come immagine preliminare. Non è obbligatorio usarla.

<param name=pwidth value=4000>
< param name=pheight value=647
>
Righe che specificano la dimensione totale del panorama

<param name=dynLoadROIs value=true>
Parametro che abilita il caricamento progressivo dinamico

<param name=roi0 value=" i'roi0.jpg' x0 y0 w400">
<param name=roi1 value=" i'roi1.jpg' x400 y0 w400">
<param name=roi2 value=" i'roi2.jpg' x800 y0 w400">
<param name=roi3 value=" i'roi3.jpg' x1200 y0 w400">
<param name=roi4 value=" i'roi4.jpg' x1600 y0 w400">
<param name=roi5 value=" i'roi5.jpg' x2000 y0 w400">
<param name=roi6 value=" i'roi6.jpg' x2400 y0 w400">
<param name=roi7 value=" i'roi7.jpg' x2800 y0 w400">
<param name=roi8 value=" i'roi8.jpg' x3200 y0 w400">
<param name=roi9 value=" i'roi9.jpg' x3600 y0 w400">

Serie di righe che specificano le ROI da caricare. In questo esempio l'immagine originale viene divisa in 10 parti da 400 pixel di larghezza. Si noti che il parametro "w400" viene specificato in ogni tag.

Questo parametro informa ptviewer sulla dimensione delle immagini ROI e viene usato esclusivamente per determinare l'ordine di caricamento delle ROI. Non è necessario settare l'esatto valore della dimensione dell'immagine: un piccolo errore non cambia l'ordine di caricamento. Se invece il parametro "w" viene omesso ptviewer potrebbe fare errori nel determinare l'ordine di caricamento. C'è anche un parametro "h" che contiene l'altezza della ROI, ma che al momento non viene usato, potrà servire per future implementazioni.

In pratica un tag ROI completo si presenta così:

< param name=roi9 value=" i'roi9.jpg' x3600 y0 w400 h534">
"w" e "h" hanno significato solo se il parametro"dynLoadROIs" viene impostato a "true".

 

Altri parametri di Ptviewer

  • m'name' - nome di una immagine da usare come maschera per la forma dell'hotspot.
    Gli hotspot di default sono dei quadrati di 20x20 pixels. Per impostare altre forme utilizzare una immagine GIF bianca nelle parti che devono essere sensibili. Questa immagine si posizionerà nel punto a sinistra in alto specificato dalle coordinate x e y dell'hotspot .
    La sagoma dell'hotspot apparirà centrato rispetto alle coordinate.
  • p - Specificando p (senza parametri) l'immagine dell'hotspot viene evidenziata quando il mouse vi si trova sopra.
  • q - specificando q (senza parametri) l'hotspot è sempre visibile. opzione usabile per la creazione di logo volanti.
  • w - Specificando w ( 'warped', senza parametri) fa si che l'immagine specificata nel tag "i" venga inserita nell'immagine panoramica invece che nella finestra dell'applett. In questo modo l'immagine è ancorata allo sfondo. L'immagine viene inserita centrata alle coordinate x e y. Si noti che x,y = 0,0 è l'angolo in alto a destra. L'immagine deve essere più piccola o riempire la foto panoramica e deve esere di forma rettangolare, l'area dell'immagine è la regione attiva, a meno che non venga specificata separatamente una maschera.
  • e - Specificando e (senza parametri) fa si che il parametro "i" venga interpretato come testo.
    Il messaggio viene mostrato in una finestra rettangolare autodimensionata con l'angolo in alto a sinistra, segnalato da un punto, determinato dalle coordinate x e y.
    Per andare a capo si usa il carattere '|'.
    Con il parametro "c" si specifica il colore del testo.

torna alla pagina precedente Indietro

torna al menu
Torna su