Jak widzisz tekst w ramce powyżej zmienia się (zapętla), wyświetlając różne informacje. W przeglądarkach Internet Explorer oraz Firefox widzimy efekt płynnego przejścia pomiędzy tekstami. W Google Chrome tekst zmienia się bez efektów przeźroczystości. Dodatkowo po najechaniu myszką na wyświetlany tekst, slajdy zatrzymują się.
Ponieważ skrypt ten jest bardzo "delikatny" w wykonaniu, nie działał poprawnie po skopiowaniu go z bloga. Zapisałem zatem kod w pliku html do pobrania z mojego chomika.
POBIERZ PROGRAM NOTEPAD++ PL - do obróbki i edycji kodu
POBIERZ PLIK Z KODEM
Najpierw obejrzyj dokładnie kod, aby uspokoić przerażenie w oczach. Na pewno wychwycisz znajome znaczniki html, które już nie pierwszy raz używałeś. Program NOTEPAD++ w bardzo przejrzysty sposób wyświetli Ci kod wraz z kolorowaniem składni co bardzo ułatwia pracę i orientację.
Omówienie skryptu po otwarciu go w programie NOTEPAD++
Kolor zielony w kodzie to komentarze. Nie będą wyświetlane przez przeglądarki. Mają Ci posłużyć za informację co gdzie jest.
Linia 07,08,09,10 - tworzenie slajdów
Są to kolejne slajdy. Zauważ, że występuje tam kolejność
tickercontent[0]=' '
tickercontent[1]=' '
tickercontent[2]=' '
tickercontent[3]=' '
Liczby, które tu widzisz oznaczają kolejność wyświetlania slajdów. Zero to pierwszy slajd.
Pomiędzy apostrofami '' wpisujemy zawartość naszego slajdu, czyli tekst, linki itd..
Jeżeli chcesz dodać kolejny slajd, stwórz następną linię kodu o numerze 4 itd. Możesz używać tu prawie wszystkich znaczników html, aby dostosować swój slajd. Zwróć jedynie uwagę na tworzenie linków na moim przykładzie. Sposób ich zapisu różni się nieco od tradycyjnej metody zapisywania linków. Ten sam link musi być zapisany 2x. Na wszelkie wypadek podaję Ci niżej prawidłowo zapisany JEDEN link otwierający się w nowym oknie:
<a href="http://chomikuj.pl/?page=303433" mce_href="http://chomikuj.pl/?page=303433" target="_new">
Linia 17 - opóźnienie wyświetlania od 1 wzwyż
Odszukaj w tej linii taki zapis:
this.delay=3000
Liczba, którą widzisz określa opóźnienie w wyświetlaniu kolejnych slajdów od 1 w górę. Wartość 3000 oznacza milisekundy. 3000 milisekund = 3 zwykłe sekundy. Zmień, aby dostosować do własnych potrzeb.
Linia 20 - szerokość i wysokość okna
Zobacz dokładnie jak wygląda ta linia kodu. Odnajdź w niej takie parametry:
width: 300px; height: 108px
To nasza szerokość i wysokość slajdów wyrażona w pikselach. Zmieniając same liczby, zmienisz szerokość i wysokość slajdów.
Linia 78 - opóźnienie wyświetlania dla 0 slajdu
Odszukaj w podanej linii wartość 3000.
Zmień ją aby dostosować opóźnienie wyświetlania dla zerowego slajdu. Wartość 3000 oznacza milisekundy. 3000 milisekund = 3 zwykłe sekundy.
Skrypt jest bardzo konfigurowalny, co daje Ci praktycznie nieograniczone możliwości jego wykorzystania. Ja osadziłem go w tabeli, ale równie dobrze można osadzić go w pojemnikach DIV (dzień dobry html).
Dla "zielonych podaję linki gdzie mogą podszlifować troszkę swój html:
Co to jest HTML:
http://poradnikchomika.blogspot.com/2010/02/html-co-to-jest.html
Tekst pogrubiony:
http://poradnikchomika.blogspot.com/2010/02/7-tekst-pogrubiony.html
Tekst podkreślony:
http://poradnikchomika.blogspot.com/2010/02/8-tekst-podkreslony.html
Tekst pochylony:
http://poradnikchomika.blogspot.com/2010/02/9-tekst-pochylony.html
Tekst przekreślony:
http://poradnikchomika.blogspot.com/2010/02/10-tekst-przekreslony.html
Wielkość czcionki:
http://poradnikchomika.blogspot.com/2010/02/11-wielkosc-czcionki.html
Rodzaj czcionki:
http://poradnikchomika.blogspot.com/2010/02/12-rodzaje-czcionek.html
Kolor czcionki:
http://poradnikchomika.blogspot.com/2010/02/13-kolor-czcionki.html
Kolor tła tła tekstu:
http://poradnikchomika.blogspot.com/2010/02/14-kolor-ta-dla-tekstu.html
Wyśrodkowanie tekstu:
http://poradnikchomika.blogspot.com/2010/02/15-wysrodkowanie-tekstu.html
Wstawianie obrazka:
http://poradnikchomika.blogspot.com/2010/02/16-jak-wstawic-obrazek.html
Wstawianie obrazka z linkiem:
http://poradnikchomika.blogspot.com/2010/02/17-obrazek-z-linkiem.html
Co to jest link:
http://poradnikchomika.blogspot.com/2010/02/18-co-to-jest-link.html
Jeszcze jedna bardzo istotna informacja. Na jednaj stronie może działać jednocześnie tylko jeden taki skrypt.
Miłej i efektownej zabawy życzę. Swoje uwagi oraz pytania piszcie w komentarzach. Jeżeli będą uzasadnione postaram się odpowiedzieć możliwie szybko.