Javascript

DIV-Effekte mit Scriptaculous

21. 05. 2009

Um recht einfach Effekte umzusetzen in CSS mit JavaScript, empfiehlt es sich, ein Framework zu verwenden.
Ich bin gerade dabei, Scriptaculous zu testen.

Allgemeines

Homepage: 1

Beispiele und Anleitungen: 2

Anleitung

1. Scriptaculous downloaden

2. Alle js-Dateien ins Verzeichnis Scripts/scriptaculous der Website kopieren

3. Folgende Zeilen in den Header der Seite einfügen:

<script src="Scripts/scriptaculous/prototype.js" type="text/javascript"></script>
<script src="Scripts/scriptaculous/scriptaculous.js" type="text/javascript"></script>

Beispiel eines Toggle-Effekts

Ziel: ein ausgeblendetes DIV bei Klick auf einen Link einzublenden und bei nochmaligem Klick wieder auszubleden

1. Den DIV per Inline-Tag ausblenden

(div id="suchfeld" style="display:none"></div)

2. Script in eine Funktion packen (oder aber auch gleich direkt ausführen)

function einblenden2(divname) { 
  Effect.toggle(divname, 'slide');
} 

3. Die Funktion einem Link zuweisen

(a href="#"><img src="used/main02/miniicon_search.gif" onClick="einblenden2('suchfeld'); return false;" /></a)

( = <

image_print
1 Stern2 Sterne3 Sterne4 Sterne5 Sterne
Loading...

Author

Manuel

Ich bin Manuel Wurm, IT-Consultant und Blogger. Ich mag es, verschiedenste Dinge auszuprobieren. Vor allem mit Retro-Computern, Bierbrauen, Bogenschießen und Schlagzeug spielen verbringe ich gerne meine Zeit. Kochen zählt zu meinen größten Hobbys - das spiegelt sich auch auf wurmweb.at wieder, wo ich gerne Rezepte teile und hilfreiche Tipps für Interessierte festhalte.

Related Posts