Pop-up- of pop-undervensters worden steeds populairder op internet. Of, eenvoudiger, pop-upfoto's. Veel site-eigenaren moeten ze vaak maken voor advertentiedoeleinden, maar niet iedereen kent het algoritme voor hun creatie.
Het is nodig
- - HTML-editor;
- - notitieboekje;
- - hosting.
instructies:
Stap 1
Maak of open een nieuwe webpagina in HTML of een teksteditor. U kunt hiervoor populaire programma's zoals Dreamweaver, Expression Web en andere gebruiken. Als je net je eerste stappen in de HTML-programmeertaal zet, gebruik dan een gewoon "kladblok".
Stap 2
Plak de volgende code tussen de tags "head" en "/ head":
.thumbnail {positie: relatief; z-index: 0;}
.thumbnail: hover {achtergrondkleur: transparant; z-index: 50;}
.thumbnail span {/ * CSS voor vergrote afbeelding * / positie: absoluut; achtergrondkleur: lichtgeel; opvulling: 5px; links: -1000px; rand: 1px grijs gestreept; zichtbaarheid: verborgen; de kleur zwart; tekstdecoratie: geen;}
.thumbnail span img {/ * CSS voor vergrote afbeelding * / border-width: 0; opvulling: 2px;}
.thumbnail: hover span {/ * CSS voor vergrote afbeelding bij hover * / zichtbaarheid: zichtbaar; boven: 0; links: 65px; / * positie waar vergrote afbeelding horizontaal moet worden verschoven * /}
Stap 3
Pas de horizontale offset van de pop-upafbeelding aan door de waarde op de laatste regel code te wijzigen. Wijs ruimte toe tussen de tags "body" en "/ body" waar u de afbeelding op de webpagina wilt laten verschijnen. Kopieer en plak vervolgens de volgende code:
Voorbeeld van een teksttitel
Een voorbeeld van een teksttitel"
Stap 4
Vervang "folder / largepci1.jpg" door het bestand dat wordt gebruikt voor de pop-upfoto. Doe hetzelfde met het tweede codeblok. Verander de regel "Voorbeeld van teksttitel" erin naar wat er in de pop-upafbeelding moet worden geschreven. Wijzig ook de hoogte- en breedtewaarden in de code om de grootte van de pop-upafbeelding aan te passen. Maak extra codeblokken om meer schetsen toe te voegen. Voer indien nodig andere attributen, tags en tekst in het HTML-document in. Sla het HTML-bestand op en upload het vervolgens naar uw webserver.
