Come fare il vostro foto sfocate quando si mouse su di esso

September 23

Come fare il vostro foto sfocate quando si mouse su di esso


Cambiare l'aspetto di un'immagine in una pagina Web quando il cursore di un visitatore passa sopra l'immagine è un metodo styling comune utilizzato per animare immagini e pulsanti. È possibile aggiungere questo effetto per una delle pagine del tuo sito web. Fortunatamente, non è necessario la conoscenza avanzata di codifica per creare questo effetto, ma si ha bisogno di accedere al codice HTML del sito web.

istruzione

Creare l'immagine

1 Aprire l'immagine che si desidera sfumare in un'applicazione di editing delle immagini.

2 Applicare una sfocatura all'immagine.

3 Salvare l'immagine sfocata, come un file di immagine, come ad esempio un PNG o JPEG. Dare un nome all'immagine semplice, ad esempio il nome del file di immagine originale seguito dal numero "2"

4 Salvare l'immagine originale e l'immagine sfocata sul tuo sito web o su un sito di file-hosting. Copia URL dell'immagine, tra cui il "http: //", e incollarli in un documento.

Codice

5 Aggiungere il seguente codice HTML della tua pagina web per specificare l'immagine che appare quando qualcuno prime visite tua pagina: <img name = "Nome immagine". Sostituire "URL dell'immagine originale" con l'URL completo, tra cui il "http: //", l'immagine non è offuscata. Sostituire "Nome Immagine" con un nome una sola parola per l'immagine, come ad esempio il nome del file. Inserire il codice tra il "<body>" e "</ body>" tag.

6 Aggiungere il seguente codice dopo la prima riga di codice per specificare l'immagine che appare quando il cursore passa sopra l'immagine: onMouseOver = "document.images [ 'name Immagine'] src = 'URL di un'immagine sfocata'.". Sostituire "Nome Immagine" con il nome dell'immagine specificato durante Fase 1. Sostituire "URL dell'immagine sfocata" con l'URL completo, tra cui il "http: //", l'immagine sfocata.

7 Aggiungere la seguente riga di codice per specificare l'immagine che appare quando il cursore non è in bilico sopra l'immagine: onMouseOut = ". Document.images [ 'name Immagine'] src = 'URL dell'immagine originale'" />. Sostituire "Nome Immagine" con il nome dell'immagine specificato durante Fase 1. Sostituire "URL dell'immagine originale" con l'URL completo, tra cui il "http: //", dell'immagine che non è sfocata.

Consigli e avvertenze

  • Taglia le immagini prima di aggiungerli alla tua pagina web per evitare pixelation e altri effetti negativi.
  • Se è necessario modificare la dimensione dell'immagine che appare nella tua pagina web, specificare i "width" e le proprietà "height" prima del "/>".

Articoli Correlati