May 18
Cascading Style Sheet (CSS) lingua fornisce un modo per creare una galleria fotografica interattiva, senza una mano di programmazione JavaScript. Utilizzando la pseudo-classe \ "hover \" per un collegamento, insieme a un po 'di HTML e CSS magia, è possibile creare un roll-over Photo Display chiazza di petrolio. Non solo sembra incredibilmente fresco, ma permette anche ai visitatori visualizzare rapidamente le versioni più grandi delle foto senza finestre pop-up, frame o il caricamento di una nuova pagina.
1 Aprire la pagina web con un editor di codice di testo o HTML preferito.
2 Aggiungere il seguente codice HTML nella tua pagina web in cui si desidera visualizzare la galleria:
<Div class = \ "galleria \">
<ul class=\"thumbs\">
<li>
<a href=\"#\" class=\"thumbnail pic1\">
<span class=\"fullpic\"></span>
<img src=\"thumbs/myimage1.jpg\"/></a>
</li>
<li>
<a href=\"#\" class=\"thumbnail pic2\">
<span class=\"fullpic\"></span>
<img src=\"thumbs/myimage2.jpg\"/></a>
</li>
<li>
<a href=\"#\" class=\"thumbnail pic3\">
<span class=\"fullpic\"></span>
<img src=\"thumbs/myimage3.jpg\"/></a>
</li>
</ul>
</ Div>
3 Modificare i codici articolo elenco in modo che il tag di immagine in ogni elemento della lista fa riferimento al file di immagine delle miniature della galleria. Se avete bisogno di altri elementi degli elenchi per altre immagini, copiare e incollare una delle voci di elenco, e cambiare la classe \ "pic # \" in modo che il \ "# \" continua il conteggio verso l'alto (dando ad ogni collegamento una classe di stile unico).
4 Aggiungere il seguente codice CSS alla sezione stile della tua pagina web. Questa stili zona galleria e farà sì che le immagini per allineare correttamente all'interno dell'area galleria:
div.gallery {
position: relative
ANDARE
border: 1px solid silver
ANDARE
height: 350px
ANDARE
width: 750px
ANDARE
}
5 Aggiungere il seguente codice CSS alla sezione stile. Questo stili le miniature in una griglia a flusso libero sulla destra dell'area dell'immagine principale:
ul.thumbs {
list-style-type:none;
width: 250px
ANDARE
float: right
ANDARE
}
ul.thumbs li {
float: left
ANDARE
}
6 Aggiungere il seguente codice CSS alla sezione stile. Questo muove e impila i tag span vuoti sul lato sinistro dell'area galleria, ed efficacemente le nasconde:
span.fullpic {
width: 1px
ANDARE
height: 1px
ANDARE
position: absolute
ANDARE
top: 5px
ANDARE
left: 5px
ANDARE
}
7 Aggiungere il seguente codice CSS alla sezione stile. Questo crea l'effetto roll-over. Quando il cursore del mouse passa sopra una miniatura (identificato dal collegamento classe \ "pic # \"), il tag span associato è espansa in modo che sia visibile. L'immagine di dimensioni più grande associato è impostato come sfondo della campata, facendolo apparire come l'immagine magicamente apparso sul lato sinistro dell'area di galleria.
a.pic1: hover {span.fullpic
background:URL(images/myimage1.jpg);
background-repeat: no-repeat
ANDARE
height:300px;
width:300px;
}
a.pic2: hover {span.fullpic
background:URL(images/myimage2.jpg);
background-repeat: no-repeat
ANDARE
height:300px;
width:300px;
}
a.pic3: hover {span.fullpic
background:URL(images/myimage3.jpg);
background-repeat: no-repeat
ANDARE
height:300px;
width:300px;
}
8 Modificare i riferimenti immagine di sfondo del codice CSS. Notare i \ "pic # \" stili di collegamento. Questi stili corrispondono ai collegamenti intorno alle immagini in miniatura e tag span nel codice HTML della pagina. Impostare lo sfondo dell'immagine \ "URL \" per il file di immagine di maggiori dimensioni corrispondente alla miniatura è legato al ogni link \ "pic # \". Se sono stati aggiunti più miniature nel passaggio precedente, aggiungere corrispondente \ "# a.pic: hover arco \" stili.