Le finestre pop-up o pop-under stanno diventando sempre più popolari su Internet. O, più semplicemente, immagini pop-up. Molti proprietari di siti spesso devono realizzarli per scopi pubblicitari, ma non tutti conoscono l'algoritmo per la loro creazione.
È necessario
- - Editor HTML;
- - taccuino;
- - ospitando.
Istruzioni
Passo 1
Crea o apri una nuova pagina web in HTML o un editor di testo. È possibile utilizzare programmi popolari come Dreamweaver, Expression Web e altri per questo scopo. Se stai solo muovendo i primi passi nel linguaggio di programmazione HTML, usa un normale "blocco note".
Passo 2
Incolla il seguente codice tra i tag "head" e "/ head":
.thumbnail {posizione: relativa; indice z: 0;}
.thumbnail: hover {colore di sfondo: trasparente; indice z: 50;}
.thumbnail span {/ * CSS per immagine ingrandita * / posizione: assoluta; colore di fondo: giallo chiaro; imbottitura: 5px; sinistra: -1000px; bordo: 1px tratteggiato grigio; visibilità: nascosta; colore nero; decorazione del testo: nessuno;}
.thumbnail span img {/ * CSS per l'immagine ingrandita * / border-width: 0; imbottitura: 2px;}
.thumbnail: al passaggio del mouse span {/ * CSS per l'immagine ingrandita al passaggio del mouse * / visibilità: visibile; in alto: 0; sinistra: 65px; / * posizione in cui l'immagine ingrandita deve essere spostata orizzontalmente * /}
Passaggio 3
Regola l'offset orizzontale dell'immagine popup modificando il valore sull'ultima riga di codice. Assegna uno spazio tra i tag "body" e "/ body" nel punto in cui desideri che l'immagine appaia nella pagina Web. Quindi copia e incolla il seguente codice:
Esempio di titolo di testo
Un esempio di titolo di testo"
Passaggio 4
Sostituisci "cartella / largepci1.jpg" con il file utilizzato per la foto popup. Fai lo stesso con il secondo blocco di codice. Cambia la riga "Esempio di titolo del testo" in essa con ciò che dovrebbe essere scritto nell'immagine a comparsa. Modifica anche i valori di altezza e larghezza nel codice per regolare la dimensione dell'immagine pop-up. Crea ulteriori blocchi di codice per aggiungere più schizzi. Inserisci altri attributi, tag e testo nel documento HTML secondo necessità. Salva il file HTML e poi caricalo sul tuo server web.
