wstaw - Kurs HTML i CSS
- Aktywne przyciski / Pamięć podręczna
Stosując bezpośrednio powyższe skrypty, można zauważyć pewien nieprzyjemny efekt: po pierwszym wskazaniu bądź kliknięciu aktywnego przycisku, trzeba nieco zaczekać, aż załaduje się obrazek, który ma zostać wyświetlony. Dzieje się tak dlatego, ponieważ dopóki nie zostanie wywołana akcja, przeglądarka nie wie jaki obrazek, dajmy na to po podświetleniu, ma zostać wyświetlony. Jednak po pierwszym użyciu przycisku, dodatkowa grafika zostanie wczytana i zapisana w pamięci podręcznej przeglądarki...
- Galeria zdjęć HTML / Skrypt galerii zdjęć
...poprzedniego i następnego zdjęcia z galerii. Dzięki temu kiedy użytkownik już do nich przejdzie, powinny się wyświetlić błyskawicznie. Jeśli chcesz wstawić taką galerię zdjęć na swojej stronie, zobacz: Skrypt galerii zdjęć (gotowiec). Galeria zdjęć (gotowiec) Stosując specjalny skrypt, który automatycznie wyświetla zdjęcia bez potrzeby otwierania nowego okna, można zautomatyzować tworzenie galerii. Ponadto aktualizacja zdjęć w takiej galerii nie będzie w tym przypadku utrudniona - dodanie...
- Indeks, wyszukiwarka / Adres bazowy
...ale można również zrobić to tylko raz. W tym celu należy zmodyfikować wpis w pliku indeks_hasla.js: var indeks = new Indeks('indeks'); indeks.wstaw(new Array( ['Hasło 1','adres1'], ['Hasło 2','adres2'], ['Hasło 3','adres3'] ), 'adres_bazowy'); Teraz nie trzeba już wpisywać tego prefiksu w adresach na liście haseł.
- Indeks, wyszukiwarka / Rozmiar
...zachodzi potrzeba zmiany wysokości okienka z hasłami, należy zmodyfikować wpis w pliku indeks_hasla.js: var indeks = new Indeks('indeks'); indeks.wstaw(new Array( ['Hasło 1','adres1'], ['Hasło 2','adres2'], ['Hasło 3','adres3'] ), null, rozmiar); Rozmiar podaje wysokość okienka z hasłami wyrażoną w liczbie linii, które się w nim zmieszczą bez konieczności przewijania.
- Losowy element
...zastosowaniem może być rotacja bannerów lub buttonów. Jeśli chcesz umieścić na swojej stronie kilka bannerów, ale masz na to tylko jedno miejsce, wstaw tam właśnie ten skrypt, dzięki czemu przy każdym wejściu będzie losowany i wyświetlany tylko jeden z bannerów. Takie rozwiązanie jest szeroko stosowane w wielu portalach, które wymieniają się bannerami i buttonami z innymi serwisami. Pozwala to zaoszczędzić miejsce na stronie i skrócić czas wczytywania, ponieważ za każdym razem ładowany jest...
- Indeks, wyszukiwarka / Nowe okno
Aby otworzyć stronę w nowym oknie, należy zmienić plik indeks_hasla.js następująco: var indeks = new Indeks('indeks', 'nazwaokna'); indeks.wstaw(new Array( ['Hasło 1','adres1'], ['Hasło 2','adres2'], ['Hasło 3','adres3'] )); Jako nazwaokna można wpisać: _blank Wyniki będą za każdym razem otwierane w nowym oknie _self Odpowiednik self z poprzedniego punktu _parent Odpowiednik parent z poprzedniego punktu _top Odpowiednik top z poprzedniego punktu nazwa Wyniki będą otwierane w nowym...
- Indeks, wyszukiwarka / Łączenie opcji
...po prostu pominąć. Dla pozostałych, które chcemy pominąć, wystarczy wpisać null (ale nie 'null'!), np.: var indeks = new Indeks('indeks'); indeks.wstaw(new Array( ['Hasło 1','adres1'], ['Hasło 2','adres2'], ['Hasło 3','adres3'] ), null, 10);
- Wyszukiwarka / Wyszukiwanie w całym światowym Internecie
...value="utf-8"> <input type="submit" value="Szukaj"> </form> Jeśli dokumenty w Twoim serwisie korzystają z innej strony kodowej niż utf-8, wstaw w wyróżnionym miejscu jej nazwę. Przykład
- Ochrona strony
...i wysokość - muszą wynosić co najmniej 200 pikseli), co umożliwiało m.in. wydruk lub zapisanie grafiki na dysku. Dla wszystkich zdjęć na stronie (wstaw w nagłówku dokumentu - <head>...</head> - poniższy kod): <meta http-equiv="Imagetoolbar" content="no"> Tylko dla wybranych zdjęć: <img src="zdjecie.jpg" alt="Tekst alternatywny" galleryimg="no"> Blokada klawisza Print Screen Klawisza Print Screen umożliwia wykonanie prostego zrzutu ekranu i późniejszego wklejenia do programu...
- Menu drzewiaste / Skrypt menu drzewiastego
...href="tree.css"> <script src="tree.js"></script> Na koniec w wybranym miejscu strony - tam, gdzie ma się wyświetlać menu drzewiaste - wstaw kod oparty na technice zagnieżdżania wykazów (tylko wypunktowanie, czyli lista nieuporządkowana <ul>...</ul>). Sposób zagnieżdżania kolejnych punktów listy będzie automatycznie odzwierciedlał strukturę drzewa menu. Oto przykładowy kod: <ul id="tree0" class="tree"> <li><a href="...">Dokument 1</a></li> <li><a>Folder 2</a> <ul> <li><a...