Hvordan lage fotoalbum med CSS
Cascading Style Sheet (CSS) språk gir en måte å skape et interaktivt bildegalleri uten en slikk av Javascript programmering. Bruke \ "hover \" pseudo-klasse for en kobling, sammen med litt HTML og CSS magi, kan du lage en glatt roll-over bildevisning. Det ser ikke bare utrolig kult, men det kan også de besøkende raskt se større versjoner av bildene dine uten pop-up vinduer, rammer eller laste en ny side.
Bruksanvisning
1 Åpne din nettside i din favoritt tekst eller HTML-kode editor.
2 Legg til følgende HTML-kode i siden på den plassen du ønsker at galleriet skal vises:
<Div class = \ "galleri \">
<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 Rediger listepunkt koder, slik at bildet koder i hvert listepunkt refererer til ditt galleri miniatyrbildefiler. Hvis du trenger flere listeelementer for flere bilder, kopiere og lime inn en av listeelementene, og endre \ "pic # \" class så \ "# \" fortsetter å telle opp (gi hver kobling en unik stil klasse).
4 Legg til følgende CSS-koden til stilen delen av nettsiden din. Dette stiler galleriet området og vil føre til at bildene å justere riktig innenfor galleriet område:
div.gallery {
position: relative
GÅ
border: 1px solid silver
GÅ
height: 350px
GÅ
width: 750px
GÅ
}
5 Legg til følgende CSS-koden til stilen delen. Dette stiler miniatyrbildene i en frittflytende rutenettet til høyre for hovedbildeområdet:
ul.thumbs {
list-style-type:none;
width: 250px
GÅ
float: right
GÅ
}
ul.thumbs li {
float: left
GÅ
}
6 Legg til følgende CSS-koden til stilen delen. Dette flytter og stabler de tomme span koder på venstre side av galleriet området, og effektivt skjuler dem:
span.fullpic {
width: 1px
GÅ
height: 1px
GÅ
position: absolute
GÅ
top: 5px
GÅ
left: 5px
GÅ
}
7 Legg til følgende CSS-koden til stilen delen. Dette skaper roll-over effekt. Når musepekeren svever over et miniatyrbilde (identifisert av klassen \ "pic # \" link), er forbundet span tag utvidet slik at det er synlig. Den tilhørende større størrelse bilde er angitt som span bakgrunn, slik at det ser ut som på bildet magisk dukket opp på venstre side av galleriet området.
a.pic1: hover span.fullpic {
background:URL(images/myimage1.jpg);
background-repeat: no-repeat
GÅ
height:300px;
width:300px;
}
a.pic2: hover span.fullpic {
background:URL(images/myimage2.jpg);
background-repeat: no-repeat
GÅ
height:300px;
width:300px;
}
a.pic3: hover span.fullpic {
background:URL(images/myimage3.jpg);
background-repeat: no-repeat
GÅ
height:300px;
width:300px;
}
8 Rediger bakgrunn bilde referanser i CSS-koden. Legg merke til de \ "pic # \" link stiler. Disse stilene tilsvarer linkene rundt miniatyrbilder og span koder i sidens HTML-kode. Sett bakgrunnsbilde \ "URL \" til den større størrelse bildefil svarer til miniatyr du tilknyttet hver \ "pic # \" link. Hvis du har lagt flere miniatyrbilder i tidligere trinn, legge tilsvarende \ "a.pic #: hover span \" stiler.
Hint
- Dra nytte av den ubrukte \ "href \" attributter i linkene rundt miniatyrene i HTML-koden for å forbedre galleriet. Bruk Javascript pop-ups eller målrette et nytt vindu for å åpne nye sider, eller legge til en handling når besøkende klikker på miniatyrbildet. Gi bildeinformasjon, laste full størrelse versjoner av bildene, eller legge det valgte bildet til besøkendes handlekurven.