43. Dynamiczny tekst - slajdy

Skrypt, który Wam dzisiaj pokażę, daje dość ciekawe możliwości, jeżeli umiejętnie go wykorzystacie. Uważam, że z powodzeniem może być wykorzystany na Twoim profilu, jeżeli brakuje Ci miejsca na stronie. Umożliwia on bowiem, wyświetlanie tekstu w tzw. slajdach. Ale to jeszcze nie wszystko. W slajdach tych, możesz umieścić linki, obrazki, a nawet podlinkowane obrazki, a to wszystko na niewielkiej powierzchni. Skrypt dedykuję raczej osobom znającym przynajmniej podstawy formatowania tekstu w języku html. Dla "zielonych", na końcu artykułu podam linki gdzie można douczyć się wspomnianych tu podstaw. No to jedziemy - tak wygląda przygotowany przeze mnie efekt:


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.