May 12
CSS - acronimo di Cascading Style Sheets - ha una proprietà di opacità che tutti i browser moderni supportano. Alterando la trasparenza di un oggetto si può rendere opaco, trasparente o traslucido. Potreste aver visto le immagini sul web che cambiano quando si passa su di loro. Il loro aspetto di solito cambia da normale alla ricerca di qualcosa di completamente diverso. Inserendo un overlay trasparente sulla parte superiore di una foto è possibile creare l'effetto opposto e fare una immagine sbiadita sembra normale quando l'utente posiziona il mouse sopra di esso.
1 Incollare il codice riportato di seguito nella sezione corpo di un documento HTML:
<Div>
<Div id = "overlay" class = "overlay" onmouseover = "manageOverlay ( 'unfade')" />
</ Div>
<Div onmouseout = "manageOverlay ( 'dissolvenza')">
<Img src = id "myImage1" = "aggiungere il nome o l'URL QUI IMMAGINE" />
</ Div
Questo codice crea un blocco div genitore che contiene due blocchi bambino div. Il primo blocco bambino - il cui ID è "overlay" - fa riferimento a una classe CSS chiamato "sovrapposizione". L'evento onmouseover provoca una funzione JavaScript denominata "manageOverlay" per eseguire quando gli utenti il mouse sopra la sovrapposizione. La prossima div contiene l'immagine e il suo valore id è "myImage1." Sostituire "aggiungere il nome o l'URL QUI IMMAGINE" con il nome di un'immagine sul disco rigido o l'URL di un'immagine su Internet.
2 Aggiungere il seguente codice nella sezione stile del documento:
.overlay
{
blocco di visualizzazione; position: absolute;
background-color: white;
Opacità: 0,38; Filtro: alpha (opacità = 38);
}
</ Style>
Questo codice definisce gli attributi del overlay. Imposta colore di sfondo della sovrapposizione di "White" e la sua opacità al 38 per cento. È necessario impostare questo valore nelle due posizioni indicate. Il primo valore - 0,38 - è un numero decimale. Esso rappresenta il 38 per cento. Il secondo numero - 38 - non ha un punto decimale. Esso rappresenta anche il 38 per cento.
3 Incollare il codice riportato di seguito nella sezione dello script del documento:
var overlayID = "overlay";
var ImageID = "myImage1";
var imageHeight;
var ImageWidth;
Le prime due istruzioni memorizzano i valori ID della sovrapposizione div e l'immagine nelle variabili denominate "overlayID" e "ImageID." Le ultime due istruzioni sono variabili che la funzione indicata nel passaggio successivo utilizza.
4 Aggiungere la seguente funzione JavaScript sotto il codice mostrato nella fase tre:
window.onload = function () {
immagine var = document.getElementById (ImageID);
var = imageHeight image.clientHeight;
var = ImageWidth image.clientWidth;
var div = document.getElementById (overlayID);
div.style.height = imageHeight;
div.style.width = ImageWidth;
}
Questo codice viene eseguito quando un browser carica la pagina Web. Il codice fa in modo che l'altezza e la larghezza della sovrapposizione corrispondono altezza e la larghezza della vostra immagine.
5 Aggiungere questo blocco finale di JavaScript sotto il codice visualizzato nel passaggio quattro:
Funzione manageOverlay (azione) {
var div = document.getElementById (overlayID);
se (azione == "unfade")
div.style.display = "none";
altro
div.style.display = "block"
}
Questa è la funzione che viene eseguito quando si passa sopra l'immagine e sposta il cursore del mouse dall'immagine. Il codice nasconde e mostra la sovrapposizione div a seconda della posizione del cursore del mouse.
6 Salvare il documento e caricarlo in un browser. La tua immagine apparirà sbiadita. Spostare il cursore del mouse sopra l'immagine per mettere in chiaro. Spostare il cursore dal immagine per farla apparire sbiadita di nuovo.