Pop-up- eller pop-under-fönster blir mer och mer populära på Internet. Eller, enklare, popup-bilder. Många webbplatsägare måste ofta göra dem för reklamändamål, men inte alla känner till algoritmen för deras skapande.
Det är nödvändigt
- - HTML-redigerare;
- - anteckningsbok;
- - värd.
Instruktioner
Steg 1
Skapa eller öppna en ny webbsida i HTML eller en textredigerare. Du kan använda populära program som Dreamweaver, Expression Web och andra för detta ändamål. Om du bara tar dina första steg i HTML-programmeringsspråket, använd ett vanligt "anteckningsblock".
Steg 2
Klistra in följande kod mellan taggarna "head" och "/ head":
.thumbnail {position: relativ; z-index: 0;}
.thumbnail: sväva {bakgrundsfärg: transparent; z-index: 50;}
.thumbnail span {/ * CSS för förstorad bild * / position: absolut; bakgrundsfärg: ljusgul; stoppning: 5px; vänster: -1000px; kant: 1px streckad grå; synlighet: dold; svart färg; text-dekoration: ingen;}
.thumbnail span img {/ * CSS för förstorad bild * / kantbredd: 0; stoppning: 2 pixlar;}
.thumbnail: sväva span {/ * CSS för förstorad bild vid sväva * / synlighet: synlig; topp: 0; vänster: 65px; / * position där förstorad bild ska förskjutas horisontellt * /}
Steg 3
Justera den horisontella förskjutningen av popup-bilden genom att ändra värdet på den sista kodraden. Tilldela utrymme mellan taggarna "body" och "/ body" där du vill att bilden ska visas på webbsidan. Kopiera och klistra sedan in följande kod:
Exempel på en textrubrik
Ett exempel på en textrubrik"
Steg 4
Ersätt "mapp / largepci1.jpg" med filen som används för popup-bilden. Gör detsamma med det andra kodblocket. Ändra raden "Exempel på textrubrik" i den till vad som ska skrivas i popup-bilden. Ändra också höjd- och breddvärdena i koden för att justera storleken på popup-bilden. Skapa ytterligare kodblock för att lägga till fler skisser. Ange andra attribut, taggar och text i HTML-dokumentet efter behov. Spara HTML-filen och ladda upp den till din webbserver.
