A pop-up vagy pop-under ablakok egyre népszerűbbek az interneten. Vagy egyszerűbben felugró képeket. Sok webhelytulajdonosnak gyakran reklámcélokból kell elkészítenie ezeket, de nem mindenki ismeri létrehozásának algoritmusát.
Szükséges
- - HTML szerkesztő;
- - jegyzetfüzet;
- - tárhely.
Utasítás
1. lépés
Hozzon létre vagy nyisson meg egy új weboldalt HTML-ben vagy szövegszerkesztőben. Erre a célra olyan népszerű programokat használhat, mint a Dreamweaver, az Expression Web és mások. Ha csak az első lépéseit teszi meg a HTML programozási nyelven, használjon egy szokásos "jegyzettömböt".
2. lépés
Illessze be a következő kódot a "head" és a "/ head" címkék közé:
.miniatűr {pozíció: rokon; z-index: 0;}
.miniatűr: lebeg {háttér-szín: átlátszó; z-index: 50;}
.miniatűr span {/ * CSS a kibővített képhez * / pozíció: abszolút; háttérszín: világos sárga; párnázás: 5px; balra: -1000px; szegély: 1px szaggatott szürke; láthatóság: rejtett; fekete szín; szövegdíszítés: nincs;}
.thumbnail span img {/ * CSS a kibővített képhez * / border-width: 0; kitöltés: 2px;}
.thumbnail: hover span {/ * CSS a kibővített kép lebegéshez * / láthatóság: látható; felső: 0; bal: 65px; / * az a helyzet, ahol a nagyított képnek vízszintesen kell eltolódnia * /}
3. lépés
Állítsa be a felugró kép vízszintes eltolását az utolsó kódsor értékének megváltoztatásával. Helyezzen el helyet a "body" és a "/ body" címkék között, ahol azt szeretné, hogy a kép megjelenjen a weboldalon. Ezután másolja és illessze be a következő kódot:
Példa egy szövegcímre
Példa egy szövegcímre"
4. lépés
Cserélje le a "folder / largepci1.jpg" szót a felugró fényképhez használt fájlra. Ugyanezt tegye a második kódblokkal is. Változtassa meg a "Példa a szöveg címére" sort arra, amit a felugró képbe kell írni. Az előugró kép méretének beállításához módosítsa a kód magasságának és szélességének értékét is. Hozzon létre további kódblokkokat további vázlatok hozzáadásához. Szükség szerint írjon be más attribútumokat, címkéket és szöveget a HTML-dokumentumba. Mentse el a HTML fájlt, majd töltse fel a webszerverre.
