Nwlapcug.com


Come fare un Look foto sbiadite a meno che non lo si passa con il Mouse



CSS - acronimo di Cascading Style Sheets..--ha una proprietà opacity che tutti i browser moderni supportano. Alterando la trasparenza di un oggetto si può rendere opaco, trasparente o traslucido. Potreste aver visto immagini di Web che cambiano quando si passa il mouse sopra di loro. Loro aspetto solitamente cambia da normale in cerca di qualcosa di completamente diverso. Inserendo una sovrapposizione traslucida sulla cima di una foto è possibile creare l'effetto opposto e far sembrare normale quando gli utenti passa sopra un immagine sbiadito.

Istruzioni

1

Incollare il codice riportato di seguito nella sezione body di un documento HTML:

< div >

< div id = "sovrapposizione" class = "sovrapposizione" onmouseover="manageOverlay('unfade')" / >
< / div >

< div onmouseout="manageOverlay('fade')" >
< img id = "myImage1" src = "Aggiungi immagine nome o URL qui" / >
< / div

Questo codice crea un blocco div padre contenente due blocchi div di bambino. Il primo blocco di bambino – il cui id è "overlay" – fa riferimento a una classe CSS denominata "sovrapposizione". L'evento onmouseover provoca una funzione JavaScript denominata "manageOverlay" per eseguire quando gli utenti passa sopra la sovrapposizione. Il prossimo div contiene l'immagine e il relativo valore di id è "myImage1." Sostituire "Aggiungi immagine nome OR URL qui" con il nome di un'immagine sul disco rigido o l'URL di un'immagine su Internet.

2

Aggiungere il codice seguente nella sezione di stile del documento:

.overlay
{
display: block; Posizione: absolute;
background-color: White;
opacità: 0,38; Filter:Alpha(Opacity=38);
}
< / stile >

Questo codice definisce gli attributi dell'overlay. Imposta colore di sfondo dell'overlay al "Bianco" e l'opacità al 38 per cento. È necessario impostare tale valore nei due punti indicati. Il primo valore – 0,38 – è un numero decimale. Esso rappresenta il 38 per cento. Il secondo numero – 38 – non ha separatore decimale. Esso rappresenta anche il 38 per cento.

3

Incollare il codice riportato di seguito nella sezione script del documento:

var overlayID = "sovrapposizione";
imageID var = "myImage1";

var imageHeight;
var imageWidth;

Le prime due istruzioni memorizzano i valori di ID del div overlay e dell'immagine nelle variabili denominate "overlayID" e "imageID." Le ultime due istruzioni sono variabili che utilizza la funzione indicata nel passaggio successivo.

4

Aggiungere la seguente funzione JavaScript sotto il codice mostrato nel passaggio 3:

Window. onLoad = function () {

immagine di var = document.getElementById(imageID);
var imageHeight = image.clientHeight;
imageWidth var = image.clientWidth;
div var = document.getElementById(overlayID);
div.Style.Height = imageHeight;
div.Style.Width = imageWidth;
}

Questo codice viene eseguito quando un browser carica la pagina Web. Il codice consente di verificare che della sovrapposizione altezza e larghezza corrispondano altezza e la larghezza dell'immagine.

5

Aggiungere questo blocco finale di JavaScript sotto il codice visualizzato nella fase quattro:

Function manageOverlay(action) () {

div var = document.getElementById(overlayID);
Se (azione = = "unfade")

div.style.display = &quot;none&quot;;

altro

div.style.display = &quot;block&quot;

}

Questa è la funzione che viene eseguito quando si passa il mouse sopra l'immagine e sposta il cursore del mouse dall'immagine. Il codice nasconde e Mostra il div overlay a seconda della posizione del cursore del mouse.

6

Salvare il documento e caricarlo in un browser. L'immagine apparirà sbiadita. Spostare il cursore del mouse sopra l'immagine per rendere chiaro. Spostare il cursore all'esterno l'immagine per far apparire sbiadita nuovamente.

Consigli & Avvertenze

  • Esperimento con le impostazioni di opacità trovare che le sbiadite sguardo che funziona meglio per voi. Le impostazioni di opacità in questo esempio sono 38 per cento. Essi creano un effetto di dissolvenza moderata. Aumentare tali valori per rendere l'immagine appaiono più sbiadito. Diminuire i valori per produrre una più chiara immagine iniziale.
  • In questo esempio, il colore di sfondo del div overlay è "Bianco". Cambiare quel colore anche se volete vedere come influisce l'immagine sbiadita.