Come creare immagini di rollover con codice HTML

Autore: Marcus Baldwin
Data Della Creazione: 13 Giugno 2021
Data Di Aggiornamento: 1 Maggio 2024
Anonim
HTML Image Submit Buttons (with Rollover) Tutorial
Video: HTML Image Submit Buttons (with Rollover) Tutorial

Contenuto

Con milioni di siti Web esistenti su Internet, è essenziale che il tuo sia unico. Una tecnica utilizzata per aggiungere un effetto dinamico ai siti Web è "immagini di rollover", note anche come "pulsanti di rollover". In sostanza, quando il visitatore passa sopra un'immagine, cambia e torna alla normalità quando il mouse viene rimosso. Questo può essere usato per alcuni effetti delicati, come cambiare il colore dell'immagine o la lettera. È possibile creare la propria immagine di rollover con formattazione HTML di base in vari programmi di progettazione.


indicazioni

Crea siti web dinamici con l'aiuto di immagini di rollover (Jupiterimages / Photos.com / Getty Images)
  1. Crea un nuovo documento con le dimensioni desiderate (in pixel) usando il software di modifica delle immagini come Photoshop. Crea le immagini normali e "rollover", che devono avere la stessa dimensione.

  2. Salvare entrambe le immagini singolarmente andando al menu "File" e selezionando "Salva". Usa i formati JPEG, GIF o PNG. Sebbene i primi due siano i più usati, i PNG conservano la trasparenza. Assicurati di salvare l'immagine nella cartella radice locale del tuo sito.

  3. Aprire il software di progettazione appropriato, ad esempio Adobe Dreamweaver. Fai clic sul pulsante "Aggiorna" nella libreria per aggiornare la libreria e la cartella radice locale del tuo sito. Individua le immagini nella cartella principale.


  4. Passa alla visualizzazione del codice della pagina web.

  5. Digitare "

    "Nel codice, senza le virgolette iniziali.

  6. Sostituisci "http://iltuosito.it" con l'indirizzo del tuo sito web. Sostituisci anche "IMAGE1" e "IMAGE2" con i nomi delle immagini normali e "rollover" rispettivamente.

Cosa ti serve

  • Software di modifica delle immagini
  • Software di progettazione Web