May 15
Una tabella HTML e un po 'di Javascript usato per essere necessario per creare una galleria fotografica di miniature e immagini più grandi che è apparso quando una miniatura è stato cliccato. Ora, si può realizzare questo con i CSS. Non richiede JavaScript e può essere rinnovato cambiando il CSS senza dover ricostruire una tabella HTML complessa.
1 Fare un contenitore DIV nel file HTML.
2 Fare una lista non ordinata di un massimo di dieci elementi per pagina. Ogni "& lt; li & gt;" tag (o elemento della lista) conterranno una fotografia e tutte le informazioni che si desidera includere su di esso, come ad esempio il titolo e il nome del fotografo.
Per esempio:
<UL>
<LI> </ LI>
</ UL>
3 Inserire il codice sorgente di immagini e informazioni fotografiche nelle voci di elenco. Assicurarsi di utilizzare solo una foto per voce dell'elenco.
Ad esempio: <LI> <img src = "/ images / photo1.jpg"> </ LI>
4 Mettere una interruzione di linea dopo che la fonte delle immagini e digitare un titolo per la fotografia.
Ad esempio: <LI> <img src = "/ images / photo1.jpg"> <br> Titolo qui </ LI>. Se si desidera includere il nome del fotografo, mettere una seconda interruzione di linea e digitare il nome del fotografo dopo di esso.
5 Sopra la "& lt; HTML & gt;" tag nella parte superiore del file, impostare il tipo di documento di XHTML 1.1. Questo assicura che la galleria funziona come previsto nei browser più popolari.
Per esempio: <DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd"!> 4.01 Transitional // EN" " http://www.w3.org/TR/html4/loose.dtd"&gt;
6 Aggiungere un tag di ancoraggio vuoto intorno ad ogni elemento della lista. Questo permette IE di utilizzare il: classe di pseudo a pop-up le immagini più grandi "hover". Dare ad ogni collegamento un diverso ma correlato nome della classe (slidea, slideb, slidec, e così via) come questo vi permetterà di lavorare con le immagini specifiche nel CSS. La "foto" prima "slidea" verrà utilizzato per impostare lo stile generale delle miniature.
<Li> <a class="photo slidea" href="#no"> <span> <img src = "/ immagini / photo1.jpg"> <br> Titolo qui </ span> </a> </ LI >.
7 Creare lo stile corpo per la pagina web galleria. Questo imposta lo stile per tutto il testo sulla pagina. Scegliere un tipo di carattere circa 12 px in termini di dimensioni e centrarlo.
Per esempio: body {font-family: tempi; font-size 12px; text-align: center; letter-spacing: .05em;}
8 Impostare il tag div contenitore per non più largo di 770px e non più alto di 396px per consentire per la galleria di rendere bene a risoluzione 800x600. Se si sta costruendo per una risoluzione dello schermo più grande, scegliere dimensioni maggiori.
Per esempio: #container {position: relative; width: 770px; altezza: 396px; margine di 20px auto 0 auto;}
9 Rimuovere i proiettili dalle voci di elenco.
Per esempio: #container ul {list-style-type: none; margin: 0; padding: 0;}
10 Rendere le immagini di grandi dimensioni invisibili in modo che possano pre-carico.
Per esempio: #container a.photo arco {position: absolute; larghezza 1px; altezza 1px; top: 5px; overflow: hidden;}
11 Crea lo stile per le miniature che includerà il modo in cui dovrebbero prendersi cura l'immagine completa è stata vista.
Esempio: #container a.photo, #container a.photo:visited~~V~~singular~~3rd {display: block; text-align: left; border: 1px solid: #ccc};
Se si desidera che le miniature per un aspetto diverso dopo la versione completa è visto, creano due stili e cambiare il colore del bordo.
12 Creare uno stile separato per ogni miniatura. Lo stile sarà in cui l'immagine di anteprima viene chiamato. Utilizzare gli stili che chiamati in ciascuna delle lista le voci elemento della pagina HTML.
Per esempio: #container a.slidea {background: URL (/images/thumb_01.jpg); Altezza: 90px Altezza: 60px;}
13 Definire la fine di ogni riga. Per un layout 800x600, ogni immagine avanti sarà la fine della vostra riga e una nuova riga inizierà con la quinta immagine.
Per esempio: html #container a.slided {width: 90 px; w \ hezza: 92 px;}
14 Definire le dimensioni del vostro layout della galleria dando dimensioni specifiche per la larghezza e l'altezza al tag lista non ordinata. Aggiungere le larghezze delle miniature per una singola riga e le altezze per una singola colonna di miniature. Utilizzare i totali delle quote nel foglio di stile.
Per esempio: #container ul {width: 240px; Altezza: 180px}
15 Includere in che modo si desidera che le immagini di galleggiare (destra o sinistra) e un piccolo margine:
Per esempio: #container ul {width: 240px; altezza: 180px; float: right; margin: 4px;}
16 Impostare il galleggiante per le singole immagini.
Per esempio: #container li {float: left;}
17 L'immagine di grandi dimensioni appare quando il mouse passa sopra la miniatura.
Per esempio: #container a.photo:hover img {float: left; margin-right: 4px}