Pop-up- eller pop-under-vinduer bliver mere og mere populære på Internettet. Eller, mere simpelt, pop op-billeder. Mange webstedsejere skal ofte lave dem til reklameformål, men ikke alle kender algoritmen til deres oprettelse.
Er det nødvendigt
- - HTML-editor
- - notesbog;
- - vært.
Instruktioner
Trin 1
Opret eller åbn en ny webside i HTML eller en teksteditor. Du kan bruge populære programmer som Dreamweaver, Expression Web og andre til dette formål. Hvis du bare tager dine første skridt i HTML-programmeringssproget, skal du bruge en almindelig "notesblok".
Trin 2
Indsæt følgende kode mellem tags "head" og "/ head":
.thumbnail {position: relative; z-indeks: 0;}
. miniaturebillede: svæver {baggrundsfarve: gennemsigtig; z-indeks: 50;}
.thumbnail span {/ * CSS for forstørret billede * / position: absolut; baggrundsfarve: lysegul; polstring: 5 px; venstre: -1000px; kant: 1px stiplet grå; synlighed: skjult; farve: sort; tekst-dekoration: ingen;}
.thumbnail span img {/ * CSS for forstørret billede * / border-width: 0; polstring: 2 px;}
.thumbnail: svævevidde {/ * CSS for forstørret billede ved svævning * / synlighed: synlig; top: 0; venstre: 65px; / * position, hvor det forstørrede billede skal forskydes vandret * /}
Trin 3
Juster popup-billedets vandrette forskydning ved at ændre værdien på den sidste kodelinje. Tildel mellemrum mellem "body" og "/ body" tags, hvor du vil have billedet vist på websiden. Kopier og indsæt derefter følgende kode:
Eksempel på en teksttitel
Et eksempel på en teksttitel"
Trin 4
Udskift "folder / largepci1.jpg" med den fil, der bruges til pop op-fotoet. Gør det samme med den anden blok med kode. Skift linjen "Eksempel på teksttitel" i den til hvad der skal skrives i pop op-billedet. Skift også højde- og breddeværdierne i koden for at justere størrelsen på pop op-billedet. Opret yderligere blokke af kode for at tilføje flere skitser. Indtast andre attributter, tags og tekst i HTML-dokumentet efter behov. Gem HTML-filen, og upload den derefter til din webserver.
