Scriptacolous-Effekt Grow

[Hape]

Um den Scriptacolous-Effekt Grow auf seine Seite einzubinden ist folgendes vorzubreiten:

Download dieses Verzeichnisses: http://script.aculo.us/downloads

Folgende Dateien sind aus dem entpacktem Zip-Ordner in den Account hochzuladen:

prototype.js
builder.js
controls.js
dragdrop.js
effects.js
scriptacolous.js
slider.js
sound.js
unitest.js

Bei einem eigenen Design wird folgendes in den Header des Styles eingetragen:

Code: Alles auswählen

<script src="URL zur Datei/prototype.js" type="text/javascript"></script>
<script src="URL zur Datei/scriptaculous.js" type="text/javascript"></script>
<script src="URL zur Datei/scriptaculous.js?load=effects,dragdrop" type="text/javascript"></script>

in die eigentliche Textseite kommt dieses:

Code: Alles auswählen

<script type="text/javascript" language="javascript">
  // <![CDATA[
  $('element_id').grow();
  // ]]>
</script>
<div id="grow_demo" style="display:none; width:400px; height:400px; background-image:url(URL zum Bild/centralpark.jpg);"></div>

Eine ausführliche Einbauanleitung hier: http://madrobby.github.io/scriptaculous/

Die Beispielseite wurde mit einem Bild gemacht. Entsprechend ist dann der Aufruf:

Code: Alles auswählen

<ul>
  <li><a href="#" onclick="Effect.Grow('grow_demo'); return false;">Klick hier f&uuml;r eine Demo</a></li>
  <li><a href="#" onclick="$('grow_demo').hide(); return false;">Reset</a></li>
</ul>

Hier eine Beispielseite: https://hapes-javascript-demo-page.hpag ... -test.html