Hvordan lage en Roll Pop-Up bilde
Hvis du utformer en hjemmeside, kan du gjøre det mer engasjerende og interessant ved å laste opp bilder eller bilder som formidler meldingen du ønsker å sende på nettstedet. Publisering av bilder på nettsteder, men betyr vanligvis legge ut en eller to store bilder på en enkelt side eller poste linker til sider som åpner bildesiden.
Det er en måte, men å vise miniatyrbilder og har større bilder vises i øyeblikket brukeren beveger musepekeren over den mindre forhåndsvisningsbildet. Ved hjelp av noen grunnleggende Cascading Style Sheets (CSS) og HTML-kode, kan du lage interaktive bilde sider som er både tiltalende og lett å navigere.
Bruksanvisning
1 Opprett eller åpne en ny webside i en HTML eller tekst editor. Du kan bruke populære HTML Editor programmer, for eksempel Dreamweaver, Expression Web, Hotdog eller andre. Alternativt kan du bruke en enkel tekst editor som Windows Notisblokk, hvis du har erfaring med koding HTML-sider fra bunnen av.
2 Sett inn følgende kode mellom "<head>" og "</ head> taggene på siden:
"<Style type =" text / css ">
.thumbnail {
position: relative;
z-index: 0;
}
.thumbnail: hover {
background-color: transparent;
z-index: 50;
}
.thumbnail span {/
CSS for forstørret bilde /
position: absolute;
background-color: lysegult;
padding: 5px;
venstre: -1000px;
border: 1px stiplede grå;
synlighet: skjult;
color: black;
text-decoration: none;
}
.thumbnail span img {/ CSS for forstørret bilde /
border-width: 0;
padding: 2 piksler;
}
.thumbnail: hover span {/ CSS for forstørret bilde på hover /
synlighet: synlig;
top: 0;
venstre: 60px; / Posisjon hvor forstørret bilde bør oppveie horisontalt /
}
</ Style> "
Juster den horisontale forskyvningen plasseringen av pop-up bilde ved å endre verdien i siste linje med kode.
3 Bla til sted mellom "<body>" og "</ body> kodene der du vil ha miniatyrbildene skal vises på websiden, og deretter kopiere og lime inn følgende kode:
<a class="thumbnail" href="#thumb"> <img width = "100px" height = "66px" border = "0" /> <span> <img /> <br /> Eksempel Caption Text </ span > </a>
<a class="thumbnail" href="#thumb"> <img width = "100px" height = "66px" border = "0" /> <span> <img /> <br /> Eksempel Caption Text </ span > </a> "
4 Endre "mappe / samplepic1.jpg" verdi til den relative banen for første miniatyr du vil vise. Sett på "mappe / largepci1.jpg" verdi med banen og filen som skal brukes til større pop-up bilde. Gjør det samme med den andre blokken med kode. Endre "Sample Caption Text" til noe som bedre beskriver den pop-up bilde.
5 Endre høyde og bredde verdier i koden for å justere størrelsen på pop-up bilde.
6 Opprett flere blokker med koden for å legge til flere miniatyrbilder til HTML-siden.
7 Tast andre attributter, koder eller tekst som trengs i HTML-dokumentet.
8 Lagre HTML-filen, og deretter laste det opp til webserveren.