Vyskakovacie alebo vyskakovacie okná sú na internete čoraz populárnejšie. Alebo jednoduchšie: kontextové obrázky. Mnoho majiteľov webov ich musí často vyrábať na reklamné účely, ale nie každý pozná algoritmus ich tvorby.
Je to nevyhnutné
- - editor HTML;
- - zápisník;
- - hosťovanie.
Inštrukcie
Krok 1
Vytvorte alebo otvorte novú webovú stránku v HTML alebo v textovom editore. Na tento účel môžete použiť populárne programy ako Dreamweaver, Expression Web a ďalšie. Ak práve podnikáte prvé kroky v programovacom jazyku HTML, použite bežný „poznámkový blok“.
Krok 2
Vložte nasledujúci kód medzi značky „head“a „/ head“:
.thumbnail {pozícia: relatívna; z-index: 0;}
.thumbnail: hover {farba pozadia: priehľadná; z-index: 50;}
.rozpätie miniatúr {/ * CSS pre zväčšený obrázok * / poloha: absolútna; farba pozadia: svetlá žltá; výplň: 5px; vľavo: -1000px; orámovanie: 1px prerušovaná šedá; viditeľnosť: skrytá; farba: čierna; dekorácia textu: žiadny;}
.thumbnail span img {/ * CSS pre zväčšený obrázok * / border-width: 0; výplň: 2px;}
.thumbnail: hover span {/ * CSS pre zväčšený obrázok pri vznášaní * / viditeľnosť: viditeľné; hore: 0; vľavo: 65 pixelov; / * pozícia, kde by sa mal zväčšený obrázok vodorovne odsadiť * /}
Krok 3
Upravte vodorovné odsadenie vyskakovacieho obrázka zmenou hodnoty v poslednom riadku kódu. Medzi značkami „body“a „/ body“, kde chcete, aby sa obrázok zobrazil na webovej stránke, pridelte priestor. Potom skopírujte a prilepte nasledujúci kód:
Ukážka textového názvu
Príklad názvu textu „
Krok 4
Nahraďte súbor „folder / largepci1.jpg“súborom použitým pre kontextovú fotografiu. To isté urobte s druhým blokom kódu. Zmeňte v ňom riadok „Príklad nadpisu textu“na text, ktorý by mal byť napísaný vo vyskakovacom obrázku. Zmeňte tiež hodnoty výšky a šírky v kóde, aby ste upravili veľkosť vyskakovacieho obrázka. Vytvorte ďalšie bloky kódu a pridajte ďalšie náčrty. Podľa potreby zadajte do dokumentu HTML ďalšie atribúty, značky a text. Uložte súbor HTML a potom ho nahrajte na webový server.
