Come lavorare con l'Oggetto Immagine

Best Practice > Passo 4 - Pagine >

Come lavorare con l'Oggetto Immagine

Previous pageReturn to chapter overviewNext page
Mostra/Nascondi testo nascosto 

Facendo doppio click su un Oggetto Immagine inserito all'interno della Griglia di impaginazione o selezionandolo e cliccando sul pulsante , si accede alla finestra Oggetto Immagine. Attraverso questa finestra è possibile specificare il file da importare, definirne le proprietà, impostare effetti di zoom e panoramica, decidere se includerlo nella SiteMap e, in caso positivo, inserire le informazioni necessarie.

Clicca per espandere/ridurreHow To: Come modificare un'immagine

WebSite X5 permette di importare tutti i più diffusi formati grafici e procede automaticamente all'ottimizzazione delle immagini utilizzate, ridimensionandole in base alle dimensioni della Cella della Griglia di impaginazione in cui sono inserite e salvandone una copia in formato compresso (in base al fattore di Qualità impostato in Oggetto Immagine | Visualizzazione).

WebSite X5 mette anche a disposizione un versatile Editor interno attraverso il quale è possibile portare a termine le più comuni operazioni di editing:

Selezionare l'Immagine su cui si vuole lavorare (Oggetto Immagine, Oggetto Galleria, E-commerce | Impostazioni Prodotto | Immagine).
Cliccare sul pulsante Modifica... disponibile.
Utilizzare le opzioni messe a disposizione dall'Editor Immagine per tagliare, ruotare, modificare l'Immagine applicando filtri, cornici, ecc.
Se necessario, creare una copia dell'immagine originale utilizzando il comando Salva come....
Clicca per espandere/ridurreHow To: Come creare un'immagine panoramica

Le fotografie panoramiche sono molto belle da vedere ma non sempre in una Pagina Web si ha lo spazio sufficiente per inserirle nelle loro reali dimensioni.

Una soluzione molto comune è di inserirle in una finestra più piccola e di lasciare che il Visitatore scopra le parti nascoste muovendo le immagini.

Preparare un'immagine panoramica che si sviluppa, per esempio, in orizzontale e che ha, dunque, una larghezza molto superiore all'altezza.
Inserire un Oggetto Immagine e importare il file relativo all'immagine panoramica.
In Oggetto Immagine | Visualizzazione impostare come Modalità di visualizzazione lo Zoom e spostamento manuale dell'Immagine o lo Zoom e spostamento automatico dell'Immagine quindi selezionare come Modalità di spostamento la Foto panoramica orizzontale.
Impostare la reale Altezza dell'immagine.
Può essere utile attivare anche l'opzione Mostra il Navigatore per permettere al Visitatore di avere un'anteprima navigabile dell'immagine panoramica completa.

In maniera del tutto analoga è possibile creare anche Immagini panoramiche che si sviluppano in verticale, piuttosto che in orizzontale.

Clicca per espandere/ridurreHow To: Come creare un pulsante utilizzando l'effetto mouseover sull'Immagine

Un effetto che può rivelarsi tanto piacevole da vedere quanto utile nell'interazione è quello associato al passaggio del mouse (effetto mouseover). WebSite X5 consente di applicare diversi tipi di effetti di mouseover sulle Immagini e di personalizzarli. I casi in cui impiegarli sono svariati: il più comune è quello in cui si vuole creare un pulsante con gli stati "rilasciato" e "premuto".

Preparare due Immagini idonee per rappresentare il pulsante nello stato "rilasciato" e nello stato "premuto".
Inserire un Oggetto Immagine e importare il file relativo all'immagine nello stato "rilasciato".
In Oggetto Immagine | Visualizzazione selezionare "Immagine sovrapposta" come Effetto su passaggio del mouse e importare il file relativo all'immagine nello stato "premuto". In questo caso le due immagini dovrebbero avere le stesse dimensioni per cui non occorre allinearle.
Completare il pulsante impostando il collegamento: tornare in Oggetto Immagine | Generale e cliccare su per richiamare la finestra Collegamento e selezionare l'azione appropriata.

Utilizzando altri tipi di effetto mouseover si può mettere semplicemente in evidenza l'immagine, portare alla visualizzazione di scritte o pulsanti che spiegano funzioni attivabili come, per esempio, una lente di ingrandimento che indica la possibilità di zoomare o un pulsante Play che invita ad avviare un video.

Clicca per espandere/ridurreHow To: Come proteggere un'immagine dalla copia non autorizzata

È relativamente semplice appropriarsi di un'Immagine pubblicata all'interno di una Pagina Web. WebSite X5 mette a disposizione due diversi sistemi per cercare di proteggere le Immagini dalla copia non autorizzata:

1. Disabilitando i comandi del menu contestuale del Browser:
Selezionare l'Immagine e accedere alla finestra Oggetto Immagine | Visualizzazione.
Attivare l'opzione Proteggi Immagine dalla copia.
2. Inserendo sull'Immagine una filigrana:
Selezionare l'Immagine, accedere alla finestra Oggetto Immagine | Generale e cliccare sul pulsante Modifica... per richiamare l'Editor Immagine.
Aprire la sezione Filigrana e selezionare dalla lista proposta l'immagine da applicare come filigrana.