Okna wyskakujące lub pop-under stają się coraz bardziej popularne w Internecie. Lub prościej, wyskakujące obrazy. Wielu właścicieli witryn często musi je tworzyć w celach reklamowych, ale nie każdy zna algorytm ich tworzenia.
Czy to jest to konieczne
- - edytor HTML;
- - notatnik;
- - hosting.
Instrukcje
Krok 1
Utwórz lub otwórz nową stronę internetową w HTML lub edytorze tekstu. W tym celu można wykorzystać popularne programy, takie jak Dreamweaver, Expression Web i inne. Jeśli dopiero stawiasz pierwsze kroki w języku programowania HTML, użyj zwykłego „notatnika”.
Krok 2
Wklej następujący kod między tagi „head” i „/ head”:
.thumbnail {pozycja: względna; indeks z: 0;}
.thumbnail: hover {kolor tła: przezroczysty; indeks z: 50;}
.thumbnail span {/ * CSS dla powiększonego obrazu * / position: absolute; kolor tła: jasnożółty; wypełnienie: 5px; po lewej: -1000px; obramowanie: 1px przerywana szarość; widoczność: ukryta; kolor czarny; dekoracja tekstu: brak;}
.thumbnail span img {/ * CSS dla powiększonego obrazu * / border-width: 0; wypełnienie: 2px;}
.thumbnail: hover span {/ * CSS dla powiększonego obrazu po najechaniu * / widoczność: widoczna; góra: 0; po lewej: 65px; / * pozycja, w której powiększony obraz powinien być przesunięty w poziomie * /}
Krok 3
Dostosuj poziome przesunięcie wyskakującego obrazu, zmieniając wartość w ostatnim wierszu kodu. Umieść miejsce między tagami „body” i „/ body” w miejscu, w którym obraz ma się pojawiać na stronie internetowej, a następnie skopiuj i wklej następujący kod:
Przykład tytułu tekstu
Przykład tytułu tekstowego „
Krok 4
Zastąp „folder / largepci1.jpg” plikiem użytym do wyskakującego zdjęcia. Zrób to samo z drugim blokiem kodu. Zmień w nim wiersz „Przykład tytułu tekstu” na taki, jaki powinien być napisany w wyskakującym obrazie. Zmień również wartości wysokości i szerokości w kodzie, aby dostosować rozmiar wyskakującego obrazu. Utwórz dodatkowe bloki kodu, aby dodać więcej szkiców. W razie potrzeby wprowadź inne atrybuty, znaczniki i tekst w dokumencie HTML. Zapisz plik HTML, a następnie prześlij go na swój serwer internetowy.
