Casa Social media Come creare un'immagine di rollover semplice in Dreamweaver - dummies

Come creare un'immagine di rollover semplice in Dreamweaver - dummies

Video: Creare immagine Rollover su DreamWeaver 2025

Video: Creare immagine Rollover su DreamWeaver 2025
Anonim

I rollover sono una caratteristica così popolare che Dreamweaver include una finestra di dialogo speciale solo per i rollover: la finestra di dialogo Inserisci immagine di rollover. Le immagini di rollover, come suggerisce il nome, sono progettate per reagire quando qualcuno fa scorrere un cursore su un'immagine. L'effetto può essere drammatico come l'immagine di un cane che viene sostituito da un'immagine di un leone o sottile come il colore di una parola che cambia.

È possibile creare effetti di rollover più complessi con l'opzione Scambia immagine dal pannello Comportamenti. L'opzione Scambia immagine consente di modificare più immagini contemporaneamente.

Per creare un semplice effetto di rollover con due immagini utilizzando la finestra di dialogo Inserisci immagine di rollover di Dreamweaver, seguire questi passaggi:

  1. Posizionare il cursore sulla pagina in cui si desidera visualizzare il rollover.

    Gli effetti di rollover richiedono almeno due immagini: una per lo stato iniziale e una per lo stato di rollover. Puoi utilizzare due immagini diverse o due simili, ma entrambe dovrebbero avere le stesse dimensioni. Altrimenti, si vedono strani effetti di ridimensionamento perché entrambe le immagini devono essere visualizzate esattamente nello stesso spazio sulla pagina.

  2. Scegli Inserisci → Immagine → Immagine di rollover.

    In alternativa, è possibile utilizzare l'elenco a discesa disponibile dall'icona Immagini nel pannello Inserimento comune e selezionare Immagine di rollover.

    Viene visualizzata la finestra di dialogo Inserisci immagine di rollover.

  3. Nella casella Nome immagine, assegna un nome all'immagine.

    Prima di poter applicare un comportamento a un elemento, ad esempio un'immagine, l'elemento deve avere un nome in modo che lo script di comportamento possa fare riferimento a esso. Puoi dare un nome agli elementi che ti piacciono purché non utilizzi spazi o caratteri speciali.

  4. Nella casella Immagine originale, specificare la prima immagine che si desidera visualizzare. Utilizzare il pulsante Sfoglia per individuare e selezionare l'immagine.

    Se le immagini non sono già nella cartella del sito locale, Dreamweaver le copia nel sito quando si crea il rollover.

  5. Nella casella Immagine rollover, inserire l'immagine che si desidera rendere visibile quando un visitatore sposta il cursore sulla prima immagine.

    Anche in questo caso, è possibile utilizzare il pulsante Sfoglia per individuare e selezionare l'immagine.

  6. Seleziona la casella di controllo Immagine di rollover pre-caricamento per caricare tutte le immagini di rollover nella cache del browser quando la pagina viene caricata per la prima volta.

    Se non si sceglie di eseguire questo passaggio, i visitatori potrebbero subire un ritardo poiché la seconda immagine non verrà scaricata fino a quando non viene spostato un cursore sull'immagine originale.

  7. Nel campo Testo alternativo, inserire una descrizione delle immagini.

    Il testo alternativo è facoltativo ma consigliato poiché l'uso di parole chiave può migliorare l'ottimizzazione dei motori di ricerca.Allo stesso modo, il testo alternativo è una parte fondamentale dell'accessibilità del Web perché questo testo viene letto ad alta voce da speciali browser chiamati screen reader, che vengono utilizzati da persone non vedenti e altri con vista o mobilità limitata. Il testo alternativo viene visualizzato solo nel browser se le immagini non sono visibili.

  8. Nella casella Quando fatto clic, vai all'URL, inserisci qualsiasi indirizzo web o naviga per individuare un'altra pagina nel tuo sito a cui desideri collegare.

    Se non si specifica un URL, Dreamweaver inserisce automaticamente il simbolo # come segnaposto nel codice.

    Il simbolo # è una tecnica comune per la creazione di collegamenti che non si collegano da nessuna parte. Poiché le immagini di rollover che non si collegano a un'altra pagina hanno molti grandi usi, questa tecnica è utile. Ricorda che se vuoi che il tuo rollover si colleghi, devi sostituire il simbolo # con un link a un'altra pagina.

  9. Fare clic su OK.

    Le immagini vengono impostate automaticamente come rollover.

  10. Per visualizzare il rollover in azione, salvare il file e fare clic sull'icona del globo nella parte superiore dell'area di lavoro per visualizzare l'anteprima della pagina in un browser Web.

Puoi vedere come funziona il rollover nella vista Progettazione di Dreamweaver o utilizzando l'opzione Vista live. Quando fai clic sul pulsante Live nella parte in alto a sinistra dell'area di lavoro, in pratica trasforma Dreamweaver in un browser Web che visualizza pagine molto simili al browser Chrome.

Quando si visualizza in anteprima una pagina sul computer che include un'immagine di rollover, alcuni browser Web visualizzeranno un avviso che indica che è necessario consentire ai controlli ActiveX di visualizzare la pagina. Questo è un avviso di sicurezza che appare solo quando la pagina viene aperta sullo stesso computer in cui la pagina viene salvata.

Se pubblichi la pagina su un server web e la visualizzi su una connessione Internet, tu e i visitatori del tuo sito non vedrai questo errore.

Credito: opera di istockphoto. com

Come creare un'immagine di rollover semplice in Dreamweaver - dummies

Scelta dell'editore

Come leggere dal file in PHP per la programmazione HTML5 e CSS3 - manichini

Come leggere dal file in PHP per la programmazione HTML5 e CSS3 - manichini

Se puoi scrivere dati in un file in PHP, sarebbe logico che tu possa leggere da quel file anche per la programmazione HTML5 e CSS3. Il readContact. programma php recupera i dati salvati nel programma precedente e li visualizza sullo schermo. Non è difficile scrivere un programma per leggere ...

Come usare una classe PHP in uno script - dummy

Come usare una classe PHP in uno script - dummy

Il codice classe PHP deve essere inserito lo script che usa la classe. Più comunemente, la classe viene archiviata in un file di inclusione separato ed è inclusa in qualsiasi script che utilizza la classe. Per usare un oggetto, devi prima creare l'oggetto dalla classe. Quindi quell'oggetto può eseguire qualsiasi metodo che ...

Scelta dell'editore

Come usare lo strumento Timbro clone di Photoshop - manichini

Come usare lo strumento Timbro clone di Photoshop - manichini

Puoi usare lo strumento Timbro clone in Photoshop per rimuovere gli angoli e altri difetti copiando una porzione dei pixel circostanti, che dovrebbero avere un colore e una consistenza simili, sopra la parte malata dell'immagine. Per utilizzare lo strumento Timbro clone, attenersi alla seguente procedura: Selezionare lo strumento Timbro clone dallo strumento ...

Come disinstallare e reinstallare Photoshop Lightroom - dummies

Come disinstallare e reinstallare Photoshop Lightroom - dummies

Se si nota un problema con Lightroom la prima volta che si avvia esso, qualcosa potrebbe essere andato storto durante il processo di installazione. Disinstallare e quindi reinstallare potrebbe essere tutto ciò che è necessario per correggere il problema. Il processo è diverso per ogni sistema operativo, quindi ecco i passaggi separati per ciascuno. Su Windows: Chiudi tutto ...

Fotografia For Dummies Cheat Sheet - dummies

Fotografia For Dummies Cheat Sheet - dummies

La fotografia è un hobby divertente e gratificante che può renderti molto popolare tra la gente nelle tue foto - o molto impopolare. Per ottenere il massimo da una fotocamera "inquadra e scatta", digitale o meno, la prima abilità da padroneggiare è bloccare l'attenzione. Puoi perfezionare le tue abilità fotografiche in modo che le tue foto siano ...

Scelta dell'editore

Agire per aumentare le emozioni edificanti - manichini

Agire per aumentare le emozioni edificanti - manichini

Al fine di elevare le tue emozioni, il primo passo è diventare consapevoli di quale emozioni che hai Diventa consapevole di ciò che ti innesca: cosa ti mette in agitazione e ti fa arrabbiare e ciò che ti rende molto eccitato. Un trigger sta guardando alcuni programmi televisivi e consente alle emozioni di questi programmi di permeare ...

Come le aziende ti convincono ad acquistare i loro prodotti - manichini

Come le aziende ti convincono ad acquistare i loro prodotti - manichini

Quasi tutti i media commerciali destinati alle donne ottengono la loro pubblicità entrate dalle industrie del cibo, della bellezza, della dieta e della moda. Solo l'industria della dieta stessa è un'impresa commerciale da 33 miliardi di dollari l'anno. E, naturalmente, queste industrie hanno bisogno di clienti in modo continuativo per continuare a avere successo. È nel loro interesse per ...

Come si forma l'immagine del corpo nella tua gioventù - dummies

Come si forma l'immagine del corpo nella tua gioventù - dummies

In generale, ciò che hai vissuto con la tua famiglia quando stavano crescendo ha avuto un effetto diretto sui pensieri e le sensazioni che hai avuto sul tuo corpo. Ripensa ai tuoi anni più giovani. Quanto attentamente le seguenti affermazioni descrivono la tua famiglia? Nessuno ha esercitato. L'auto è stata utilizzata anche per viaggi brevi. Cibo pesante e da ingrasso ...