Teraz zobaczmy, jak można zbudować te efekty na swojej stronie internetowej:
Dodawanie ciekawych efektów graficznych przy użyciu script.aculo.us JavaScripts

Ten poradnik pokazuje jak dodawać fajne efekty do swoich zdjęć przy użyciu biblioteki JavaScript rozwijanej przez http://script.aculo.us/ . Script.aculo.us oferuje łatwy w obsłudze interfejs użytkownika, cross-browser JavaScript bibliotek do witryn internetowych i aplikacji internetowych.
Więcej Informacji oraz skrypt możesz pobrać z tej lokalizacji:
http://script.aculo.us/.
Kliknij jeden z przycisków, aby zobaczyć demonstrację efektów. Są to tylko niektóre z dostępnych efektów. Kliknij przycisk Reset, aby przywrócić obraz do stanu pierwotnego
Krok 4
Kopiuj / wklej ten kod:

<script src="./prototype.js" type="text/javascript"></script>
<script src="./scriptaculous.js" type="text/javascript"></script>
Krok 5
Dodaj na stronę obiekt "Opublikuj pliki", we własciwosciach obiektu dodaj następujące pliki do opublikowania
:

c:\scriptaculous\lib\prototype.js
c:\scriptaculous\src\builder.js
c:\scriptaculous\src\controls.js
c:\scriptaculous\src\dragdrop.js
c:\scriptaculous\src\effects.js
c:\scriptaculous\src\scriptaculous.js
c:\scriptaculous\src\slider.js
c:\scriptaculous\src\unittest.js
Krok 6
Dodak obrazek na stronę (Menu-> Dodaj> Obrazek) i zwróć uwagę na  ID  obiektu  obrazka w oknie, zapamiętaj go.
Krok 7
W tym kroku dodamy przycisk, niech to będzie np.przycisk z grupy Formularz.
Kliknij Menu-> Dodaj -> Formularz-> Przycisk Zaawansowany, aby dodać nowy przycisk na swojej stronie.

Krok 8
Otwórz właściwości przycisku i ustaw:
Typ Przycisku - 'PrzyKliknięciu' 
Akcja PrzyKliknięciu - 'Wykonaj Funkcję Javascript"
Wartość przy Kliknięciu - wklej jedną z poniższych wartości (w zależności od rodzaju efektu, jaki chcesz uzyskać):

new Effect.Appear('Image2'); return false;
new Effect.Fade('Image2'); return false;
new Effect.Puff('Image2');return false;
new Effect.Grow('Image2'); return false;
new Effect.Shrink('Image2'); return false;
new Effect.Scale('Image2',150,{scaleX: true, scaleY: true}); return false;
new Effect.Scale('Image2',20,{scaleX: true, scaleY: true}); return false;
new Effect.BlindUp('Image2'); return false;
new Effect.BlindDown('Image2'); return false;
new Effect.DropOut('Image2');return false;
new Effect.SwitchOff('Image2');return false;
new Effect.Pulsate('Image2');return false;
new Effect.Fold('Image2');return false;
new Effect.Shake('Image2');return false;
new Effect.Squish('Image2');return false;
Uwaga:
Efekty można również wywołać za pomocą dowolnego obiektu umożliwiającego dodawanie zdarzeń czyli obrazki, kształty,pola formularza czy też odnośnik tekstowy.
Wystarczy dodać zdarzenie a jako cel podstawić  "funkcję JavaScript" i dodać kod jak pokazano powyżej, ja właśnie na tej stronie użyłem zwykłego przycisku "podpinając" zdarzenie.

Krok 1
Pobierz skrypt ze strony http://script.aculo.us/

Krok 2
Rozpakuj pliki do wybranego folderu. Na przykład: c: \ Scriptaculous

Krok 3,
W menu Web Builder kliknij Strona-> Strona HTML aby wyświetlić okno z kodem Html wybierz zakładkę Pomiędzy tagami.HEAD.

na podstawie : http://www.wysiwygwebbuilder.com/scriptaculous.html
Efekty na tej liście są w takiej kolejności jak zostały użyte w demie, czyli "new Effect.Appear('Image2'); return false;" to jest Reset.
W przypadku gdyby twój obrazek (lub również inny obiekt  który możesz użyc) miał inny identyfikator ID to uwzględnij to zmieniając wartość we wklejanym kodzie.




Wyjście
---Home------Download------Zakup------Poradniki Online------Szablony------Wsparcie------Forum------Rozszerzenia------Manual------Rózne---
Copyright © 2017