Vyskakovací nebo vyskakovací okna jsou na internetu stále populárnější. Nebo jednodušeji vyskakovací obrázky. Mnoho vlastníků webů je často musí vyrábět pro reklamní účely, ale ne každý zná algoritmus pro jejich vytvoření.
Je to nutné
- - editor HTML;
- - notebook;
- - hosting.
Instrukce
Krok 1
Vytvořte nebo otevřete novou webovou stránku v HTML nebo v textovém editoru. K tomuto účelu můžete použít populární programy, jako je Dreamweaver, Expression Web a další. Pokud právě podnikáte první kroky v programovacím jazyce HTML, použijte běžný „poznámkový blok“.
Krok 2
Vložte následující kód mezi značky „head“a „/ head“:
.thumbnail {pozice: relativní; z-index: 0;}
.thumbnail: hover {barva pozadí: transparentní; z-index: 50;}
.thumbnail span {/ * CSS pro zvětšený obrázek * / pozice: absolutní; barva pozadí: světle žlutá; výplň: 5px; vlevo: -1000px; ohraničení: 1px přerušovaná šedá; viditelnost: skrytá; Černá barva; textová výzdoba: žádná;}
.thumbnail span img {/ * CSS pro zvětšený obrázek * / border-width: 0; odsazení: 2px;}
.thumbnail: hover span {/ * CSS pro zvětšený obrázek při najetí myší * / visibility: visible; nahoře: 0; vlevo: 65px; / * pozice, kde by měl být zvětšený obrázek vodorovně odsazen * /}
Krok 3
Upravte vodorovné odsazení vyskakovacího obrázku změnou hodnoty na posledním řádku kódu. Přidělte prostor mezi značky „body“a „/ body“tam, kde se má obrázek na webové stránce zobrazit. Potom zkopírujte a vložte následující kód:
Příklad názvu textu
Příklad názvu textu „
Krok 4
Nahraďte soubor „folder / largepci1.jpg“souborem použitým pro vyskakovací fotografii. Totéž proveďte s druhým blokem kódu. Změňte v něm řádek „Příklad nadpisu textu“na text, který by měl být napsán ve vyskakovacím obrázku. Změňte také hodnoty výšky a šířky v kódu a upravte velikost vyskakovacího obrázku. Vytvořte další bloky kódu a přidejte další náčrtky. Podle potřeby zadejte do dokumentu HTML další atributy, značky a text. Uložte soubor HTML a poté jej nahrajte na webový server.
