
Sehr geehrte Kunden,
ab heute steht Ihnen folgende neue Funktion zu Verfügung:
Übersicht:
- Spry Effects auf der Startseite
- Spry Effects Im Shopfenster als Banner
Spry Effects auf der Startseite
Mit "Spry Effects" haben Sie neue Möglichkeiten interessante Effekte in Ihren Shop einzubauen. Dabei Können auch ganze Infotypen (bis auf wenige Ausnahmen wie z.B. das 3D-Karussell oder dem Ticker) in die Effekte eingebunden werden.
Spry Effects sind von Adobe frei zur Verfügung gestellte Skripte, die man kostenlos auch in gewerblichen Seiten nutzen kann. Diese sind nicht Bestandteil der POWERGAP Software, sondern wir beschreiben hier nur, wie man diese in Ihrem Shop einsetzt um schicke Effekte zu erzeugen.
Schauen Sie sich dazu bitte kurz das folgende Video-Beispiel an oder besuchen unseren Demo-Hardwareshop (Klick!) und klicken sich dort auf der Startseite unter dem ersten Banner in der Mitte durch die "TOP Produkte"!
Dies ist nur ein Beispiel von 1.000en, die man mit entsprechender Fantasie entwickeln könnte. Die Einbindung und Entwicklung dessen ist leider nicht so einfach. Daher sagen wir schon hier ganz zu Anfang, dass wir dies gerne auch als Auftragsarbeit für Sie entgegennehmen. Die Kosten für einfache Versionen können bei einer Stunde liegen, aber es ist auch zu schaffen einen ganzen Tag an einer besonders schicken Lösung zu arbeiten. Das Beispiel aus dem Demo-Hardwareshop.net hat über 5 Stunden gedauert. Bei Grafikarbeiten, die bei POWERGAP mit 70,- EUR die Stunde abgerechnet werden, halten sich die Entwicklungskosten aber in Grenzen und da man hier mit Infotypen arbeitet, die ja dynamisch andere Inhalte anzeigen hat so eine Lösung auch länger Bestand.
Diese Art der Artikelpräsentation ist nur eine von vielen Möglichkeiten. Auf Demo-Shop (Klick!) in der Artikelgruppe "Mode" haben wir ein Test des Moduls eingestellt, dass alle Varianten der möglichen Übergänge darstellt. Diese Demo dient nur zur Veranschaulichung.

Folgende unterschiedliche Effekte kann man im Code verwenden:
Die folgenden Einstellungen sind dazu in der Shopverwaltung nötig:
Über "Sonstiges" > "Sonstige Einstellungen" muss in das Feld "Javascript_Head:" folgendes hinzugefügt werden:

Über "Layout" > "Schriften / CSS" > "ROOT" muss folgendes eingetragen werden:
.content_panel {
width:454px;
height:204px;
}
.container {
width:456px;
height:202px;
background-color:#FFFFFF;
border-top: 0px;
border-right: solid 1px #DDDDDD;
border-bottom: solid 1px #DDDDDD;
border-left: solid 1px #DDDDDD;
}
Über CSS lassen sich bestimmte Layout-Attribute wie Breite, Höhe, Rahmenfarbe, etc. festlegen. CSS Spezialisten wissen hier sicher sehr gut damit umzugehen.

Als nächstes legt man über das "gelbe B" > "Bannerumsätze" > "anlegen" > "Flash / HTML" ein Starseiten-Banner an.
In unserem Beispiel im Demo-Hardwareshop ist der folgende Code dafür nötig:
<SCRIPT LANGUAGE="javaScript"><!--
var infotyp_21="#infotyp_21#";
var infotyp_22="#infotyp_22#";
var infotyp_23="#infotyp_23#";
var infotyp_24="#infotyp_24#";
var infotyp_25="#infotyp_25#";
//--></script>
<table cellpedding=0 cellspacing=0 border=0><tr><td valign=top align=center><img src=https://cdn.powergap.de/spry_x.gif></td></tr>
<tr><td valign=top align=center><nobr>
<img src=https://cdn.powergap.de/spry_xl.gif><a href="#" onclick="return runEffect('Squish', 'product_box', {duration: 200, from: '100%', to: '0%', toggle: true},infotyp_21)">
<img src="img/spry_1.gif" onmouseover="document.getElementById('spry1').src = 'img/spry_1a.gif';" onmouseout="document.getElementById('spry1').src = 'img/spry_1.gif';" id="spry1"></a>
<img src=https://cdn.powergap.de/spry_xm.gif><a href="#" onclick="return runEffect('Squish', 'product_box', {duration: 200, from: '100%', to: '0%', toggle: true},infotyp_22)">
<img src="img/spry_2.gif" onmouseover="document.getElementById('spry2').src = 'img/spry_2a.gif';" onmouseout="document.getElementById('spry2').src = 'img/spry_2.gif';" id="spry2"></a>
<img src=https://cdn.powergap.de/spry_xm.gif><a href="#" onclick="return runEffect('Squish', 'product_box', {duration: 200, from: '100%', to: '0%', toggle: true},infotyp_23)">
<img src="img/spry_3.gif" onmouseover="document.getElementById('spry3').src = 'img/spry_3a.gif';" onmouseout="document.getElementById('spry3').src = 'img/spry_3.gif';" id="spry3"></a>
<img src=https://cdn.powergap.de/spry_xm.gif><a href="#" onclick="return runEffect('Squish', 'product_box', {duration: 200, from: '100%', to: '0%', toggle: true},infotyp_24)">
<img src="img/spry_4.gif" onmouseover="document.getElementById('spry4').src = 'img/spry_4a.gif';" onmouseout="document.getElementById('spry4').src = 'img/spry_4.gif';" id="spry4"></a>
<img src=https://cdn.powergap.de/spry_xr.gif></td></tr>
<tr><td width=453 align=center>
<div class="container" id="product_box">
<SCRIPT LANGUAGE="javaScript"><!--
document.write(infotyp_25);
//--></script>
</div>
</td></tr></table>
Der gewählte "Spry Effect" ist in diesem Fall "Squish":
[...]<a href="#" onclick="return runEffect('Squish', 'product_box', {dura...[...]
Diesem Banner ordnet man einem Bannerort auf der "Startseite" zu, z.B. "Startseite01".

Im nächsten Schritt muss dieses "Start-Banner 01" über "Layout" > "Startseite" > "Infogruppen (Startseite)" in einer Infogruppe bzw. in einem Feld aktiviert werden.

Zu guter Letzt müssen noch entsprechende Banner bzw. Inhalte in den einzelnen Infotypen angelegt werden.
Im o.a. Code heißt es zu Anfang:
var infotyp_21="#infotyp_21#";
var infotyp_22="#infotyp_22#";
var infotyp_23="#infotyp_23#";
var infotyp_24="#infotyp_24#";
var infotyp_25="#infotyp_25#";
Bei Nutzung der Infotypen 3 und 4 müsste das dann wie folgt aussehen:
var infotyp_3="#infotyp_3#";
var infotyp_4="#infotyp_4#";
Es werden also diesen Javascript Variablen der HTML Text des jeweiligen Infotyps zugewiesen. #infotyp_3# ist also nicht anderes wie ein Synonym für den Infotyp mit der ID 3.
Selbstverständlich kann man dort natürlich auch eigenes HTML einsetzen. Beispiel:
var html1="<img src=https://cdn.powergap.de/xxx.jpg>";
var html2="<p>bla bla...</p>";
Die frei verwendbaren Variablen (in dem Beispiel html1) können so auch mit statischen Inhalten gefüllt werden.
Das folgende Screenshot verdeutlicht, dass z.B. der Infotyp "Graf/Tooltipp 01" die ID "21" hat, "Graf/Tooltipp 02" ist Infotyp-ID "22", etc.

Spry Effects im Shopfenster als Banner
Der "Spry Effect" kann aber auch innerhalb der Shopfenster benutzt werden. Allerdings kann dies nicht zusammen mit dem "Spry Effect" auf der Startseite gleichzeitig innerhalb einer Artikelgruppe eingesetzt werden.
Ein entsprechendes Beispiel ("Best movies ever") haben wir in unserem Demo-Shop (Klick!) auf der rechten Seite unter den "Top 5" eingerichtet.
Über "Layout" > "Schriften / CSS" > "ROOT" muss folgendes eingetragen werden:
container2 weil wir ja in diesem Demoshop schon ein "Spry Effect" einsetzen, welcher andere Werte benötigt.
Wie auch für das Startseiten-Banner muss über das "gelbe B" > "Bannerumsätze" > "anlegen" > "Flash / HTML" ein Banner angelegt werden, welches dann einem Banner-Ort innerhalb der Shopfenster zugeordnet werden muss. Z.B. "SF-Banner06".
<SCRIPT LANGUAGE="javaScript"><!--
var html_01="<a href=s.php?a=101110><img src=https://pic.powergap.de/101110t.jpg></a>";
var html_02="<a href=s.php?a=101114><img src=https://pic.powergap.de/101114t.jpg></a>";
var html_03="<a href=s.php?a=101102><img src=https://pic.powergap.de/101102t.jpg></a>";
var html_04="<a href=s.php?a=101122><img src=https://pic.powergap.de/101122t.jpg></a>";
var html_05="<a href=s.php?a=101118><img src=https://pic.powergap.de/101118t.jpg></a>";
//--></script>
<center><span class="b3">Best movies ever:</span><br><img src=https://cdn.powergap.de/l1.gif height=4><br>
<a href="#" onclick="return runEffect('DropOut', 'product_box', {duration: 800, from: '100%', to: '0%', toggle: true},html_01)">
<img src="img/spry_1.gif" onmouseover="document.getElementById('spry1').src = 'img/spry_1a.gif';" onmouseout="document.getElementById('spry1').src = 'img/spry_1.gif';" id="spry1">
</a>
<a href="#" onclick="return runEffect('DropOut', 'product_box', {duration: 800, from: '100%', to: '0%', toggle: true},html_02)">
<img src="img/spry_2.gif" onmouseover="document.getElementById('spry2').src = 'img/spry_2a.gif';" onmouseout="document.getElementById('spry2').src = 'img/spry_2.gif';" id="spry2">
</a>
<a href="#" onclick="return runEffect('DropOut', 'product_box', {duration: 800, from: '100%', to: '0%', toggle: true},html_03)">
<img src="img/spry_3.gif" onmouseover="document.getElementById('spry3').src = 'img/spry_3a.gif';" onmouseout="document.getElementById('spry3').src = 'img/spry_3.gif';" id="spry3">
</a>
<a href="#" onclick="return runEffect('DropOut', 'product_box', {duration: 800, from: '100%', to: '0%', toggle: true},html_04)">
<img src="img/spry_4.gif" onmouseover="document.getElementById('spry4').src = 'img/spry_4a.gif';" onmouseout="document.getElementById('spry4').src = 'img/spry_4.gif';" id="spry4">
</a>
<a href="#" onclick="return runEffect('DropOut', 'product_box', {duration: 800, from: '100%', to: '0%', toggle: true},html_05)">
<img src="img/spry_5.gif" onmouseover="document.getElementById('spry5').src = 'img/spry_5a.gif';" onmouseout="document.getElementById('spry5').src = 'img/spry_5.gif';" id="spry5">
</a>
</center>
<div class="container2" id="product_box" align=center><img src=https://cdn.powergap.de/spry_x1.jpg style="margin-top:4px;"></div>
Über "Layout" > "Shopfenster" muss dann nur noch das entsprechende Banner aktiviert (hier: "Banner06") aktiviert und an die gewünschte Stelle verschoben werden.
Hier funktionieren keine Synonyme. Man kann in den Shopfenstern derzeit nur eigenes statisches HTML einsetzen. In einem späteren Step werden wir hier evtl. nette automatische Inhalte anbieten, die man dann per Synonym einbinden kann. Da könnte man sich z.B. Inhalte wie TOP10, Neuste Ratings, News, oder sonstiges vorstellen.
Da dies doch ein sehr komplexes Thema ist und für die Einrichtung fortgeschrittene HTML und Javascript-Kenntnisse nötig sind, können Sie uns gerne mit der Gestaltung und Einrichtung eines solchen Startseiten/- oder Shopfenster-Banners beauftragen.
Wir bitte um Verständnis, dass wir außerhalb der reinen "Einbindung" dieser Möglichkeit keinerlei Support für Fragen zu Javascript, HTML oder CSS anbieten können.
ab heute steht Ihnen folgende neue Funktion zu Verfügung:
Übersicht:
- Spry Effects auf der Startseite
- Spry Effects Im Shopfenster als Banner
Spry Effects auf der Startseite
Mit "Spry Effects" haben Sie neue Möglichkeiten interessante Effekte in Ihren Shop einzubauen. Dabei Können auch ganze Infotypen (bis auf wenige Ausnahmen wie z.B. das 3D-Karussell oder dem Ticker) in die Effekte eingebunden werden.
Spry Effects sind von Adobe frei zur Verfügung gestellte Skripte, die man kostenlos auch in gewerblichen Seiten nutzen kann. Diese sind nicht Bestandteil der POWERGAP Software, sondern wir beschreiben hier nur, wie man diese in Ihrem Shop einsetzt um schicke Effekte zu erzeugen.
Schauen Sie sich dazu bitte kurz das folgende Video-Beispiel an oder besuchen unseren Demo-Hardwareshop (Klick!) und klicken sich dort auf der Startseite unter dem ersten Banner in der Mitte durch die "TOP Produkte"!
[stream=640,480]http://www.powergap.de/forum/img/2008_07/clip0001.wmv[/stream]
Dies ist nur ein Beispiel von 1.000en, die man mit entsprechender Fantasie entwickeln könnte. Die Einbindung und Entwicklung dessen ist leider nicht so einfach. Daher sagen wir schon hier ganz zu Anfang, dass wir dies gerne auch als Auftragsarbeit für Sie entgegennehmen. Die Kosten für einfache Versionen können bei einer Stunde liegen, aber es ist auch zu schaffen einen ganzen Tag an einer besonders schicken Lösung zu arbeiten. Das Beispiel aus dem Demo-Hardwareshop.net hat über 5 Stunden gedauert. Bei Grafikarbeiten, die bei POWERGAP mit 70,- EUR die Stunde abgerechnet werden, halten sich die Entwicklungskosten aber in Grenzen und da man hier mit Infotypen arbeitet, die ja dynamisch andere Inhalte anzeigen hat so eine Lösung auch länger Bestand.
Diese Art der Artikelpräsentation ist nur eine von vielen Möglichkeiten. Auf Demo-Shop (Klick!) in der Artikelgruppe "Mode" haben wir ein Test des Moduls eingestellt, dass alle Varianten der möglichen Übergänge darstellt. Diese Demo dient nur zur Veranschaulichung.

Folgende unterschiedliche Effekte kann man im Code verwenden:
[li]Fade[/li]
[li]Blind[/li]
[li]Squish[/li]
[li]Grow[/li]
[li]Shake[/li]
[li]FadeBlind[/li]
[li]Pulsate[/li]
[li]Puff[/li]
[li]DropOut[/li]
[li]Fold[/li]
Die folgenden Einstellungen sind dazu in der Shopverwaltung nötig:
Über "Sonstiges" > "Sonstige Einstellungen" muss in das Feld "Javascript_Head:" folgendes hinzugefügt werden:
<script type="text/javascript" src="x_SpryEffects.js"></script>

Über "Layout" > "Schriften / CSS" > "ROOT" muss folgendes eingetragen werden:
.content_panel {
width:454px;
height:204px;
}
.container {
width:456px;
height:202px;
background-color:#FFFFFF;
border-top: 0px;
border-right: solid 1px #DDDDDD;
border-bottom: solid 1px #DDDDDD;
border-left: solid 1px #DDDDDD;
}
Über CSS lassen sich bestimmte Layout-Attribute wie Breite, Höhe, Rahmenfarbe, etc. festlegen. CSS Spezialisten wissen hier sicher sehr gut damit umzugehen.

Als nächstes legt man über das "gelbe B" > "Bannerumsätze" > "anlegen" > "Flash / HTML" ein Starseiten-Banner an.
In unserem Beispiel im Demo-Hardwareshop ist der folgende Code dafür nötig:
<SCRIPT LANGUAGE="javaScript"><!--
var infotyp_21="#infotyp_21#";
var infotyp_22="#infotyp_22#";
var infotyp_23="#infotyp_23#";
var infotyp_24="#infotyp_24#";
var infotyp_25="#infotyp_25#";
//--></script>
<table cellpedding=0 cellspacing=0 border=0><tr><td valign=top align=center><img src=https://cdn.powergap.de/spry_x.gif></td></tr>
<tr><td valign=top align=center><nobr>
<img src=https://cdn.powergap.de/spry_xl.gif><a href="#" onclick="return runEffect('Squish', 'product_box', {duration: 200, from: '100%', to: '0%', toggle: true},infotyp_21)">
<img src="img/spry_1.gif" onmouseover="document.getElementById('spry1').src = 'img/spry_1a.gif';" onmouseout="document.getElementById('spry1').src = 'img/spry_1.gif';" id="spry1"></a>
<img src=https://cdn.powergap.de/spry_xm.gif><a href="#" onclick="return runEffect('Squish', 'product_box', {duration: 200, from: '100%', to: '0%', toggle: true},infotyp_22)">
<img src="img/spry_2.gif" onmouseover="document.getElementById('spry2').src = 'img/spry_2a.gif';" onmouseout="document.getElementById('spry2').src = 'img/spry_2.gif';" id="spry2"></a>
<img src=https://cdn.powergap.de/spry_xm.gif><a href="#" onclick="return runEffect('Squish', 'product_box', {duration: 200, from: '100%', to: '0%', toggle: true},infotyp_23)">
<img src="img/spry_3.gif" onmouseover="document.getElementById('spry3').src = 'img/spry_3a.gif';" onmouseout="document.getElementById('spry3').src = 'img/spry_3.gif';" id="spry3"></a>
<img src=https://cdn.powergap.de/spry_xm.gif><a href="#" onclick="return runEffect('Squish', 'product_box', {duration: 200, from: '100%', to: '0%', toggle: true},infotyp_24)">
<img src="img/spry_4.gif" onmouseover="document.getElementById('spry4').src = 'img/spry_4a.gif';" onmouseout="document.getElementById('spry4').src = 'img/spry_4.gif';" id="spry4"></a>
<img src=https://cdn.powergap.de/spry_xr.gif></td></tr>
<tr><td width=453 align=center>
<div class="container" id="product_box">
<SCRIPT LANGUAGE="javaScript"><!--
document.write(infotyp_25);
//--></script>
</div>
</td></tr></table>
Der gewählte "Spry Effect" ist in diesem Fall "Squish":
[...]<a href="#" onclick="return runEffect('Squish', 'product_box', {dura...[...]
Diesem Banner ordnet man einem Bannerort auf der "Startseite" zu, z.B. "Startseite01".

Im nächsten Schritt muss dieses "Start-Banner 01" über "Layout" > "Startseite" > "Infogruppen (Startseite)" in einer Infogruppe bzw. in einem Feld aktiviert werden.

Zu guter Letzt müssen noch entsprechende Banner bzw. Inhalte in den einzelnen Infotypen angelegt werden.
Im o.a. Code heißt es zu Anfang:
var infotyp_21="#infotyp_21#";
var infotyp_22="#infotyp_22#";
var infotyp_23="#infotyp_23#";
var infotyp_24="#infotyp_24#";
var infotyp_25="#infotyp_25#";
Bei Nutzung der Infotypen 3 und 4 müsste das dann wie folgt aussehen:
var infotyp_3="#infotyp_3#";
var infotyp_4="#infotyp_4#";
Es werden also diesen Javascript Variablen der HTML Text des jeweiligen Infotyps zugewiesen. #infotyp_3# ist also nicht anderes wie ein Synonym für den Infotyp mit der ID 3.
Selbstverständlich kann man dort natürlich auch eigenes HTML einsetzen. Beispiel:
var html1="<img src=https://cdn.powergap.de/xxx.jpg>";
var html2="<p>bla bla...</p>";
Die frei verwendbaren Variablen (in dem Beispiel html1) können so auch mit statischen Inhalten gefüllt werden.
Das folgende Screenshot verdeutlicht, dass z.B. der Infotyp "Graf/Tooltipp 01" die ID "21" hat, "Graf/Tooltipp 02" ist Infotyp-ID "22", etc.

Spry Effects im Shopfenster als Banner
Der "Spry Effect" kann aber auch innerhalb der Shopfenster benutzt werden. Allerdings kann dies nicht zusammen mit dem "Spry Effect" auf der Startseite gleichzeitig innerhalb einer Artikelgruppe eingesetzt werden.
Ein entsprechendes Beispiel ("Best movies ever") haben wir in unserem Demo-Shop (Klick!) auf der rechten Seite unter den "Top 5" eingerichtet.
Über "Layout" > "Schriften / CSS" > "ROOT" muss folgendes eingetragen werden:
.container2 {width:140px;height:175px;}
container2 weil wir ja in diesem Demoshop schon ein "Spry Effect" einsetzen, welcher andere Werte benötigt.
Wie auch für das Startseiten-Banner muss über das "gelbe B" > "Bannerumsätze" > "anlegen" > "Flash / HTML" ein Banner angelegt werden, welches dann einem Banner-Ort innerhalb der Shopfenster zugeordnet werden muss. Z.B. "SF-Banner06".
<SCRIPT LANGUAGE="javaScript"><!--
var html_01="<a href=s.php?a=101110><img src=https://pic.powergap.de/101110t.jpg></a>";
var html_02="<a href=s.php?a=101114><img src=https://pic.powergap.de/101114t.jpg></a>";
var html_03="<a href=s.php?a=101102><img src=https://pic.powergap.de/101102t.jpg></a>";
var html_04="<a href=s.php?a=101122><img src=https://pic.powergap.de/101122t.jpg></a>";
var html_05="<a href=s.php?a=101118><img src=https://pic.powergap.de/101118t.jpg></a>";
//--></script>
<center><span class="b3">Best movies ever:</span><br><img src=https://cdn.powergap.de/l1.gif height=4><br>
<a href="#" onclick="return runEffect('DropOut', 'product_box', {duration: 800, from: '100%', to: '0%', toggle: true},html_01)">
<img src="img/spry_1.gif" onmouseover="document.getElementById('spry1').src = 'img/spry_1a.gif';" onmouseout="document.getElementById('spry1').src = 'img/spry_1.gif';" id="spry1">
</a>
<a href="#" onclick="return runEffect('DropOut', 'product_box', {duration: 800, from: '100%', to: '0%', toggle: true},html_02)">
<img src="img/spry_2.gif" onmouseover="document.getElementById('spry2').src = 'img/spry_2a.gif';" onmouseout="document.getElementById('spry2').src = 'img/spry_2.gif';" id="spry2">
</a>
<a href="#" onclick="return runEffect('DropOut', 'product_box', {duration: 800, from: '100%', to: '0%', toggle: true},html_03)">
<img src="img/spry_3.gif" onmouseover="document.getElementById('spry3').src = 'img/spry_3a.gif';" onmouseout="document.getElementById('spry3').src = 'img/spry_3.gif';" id="spry3">
</a>
<a href="#" onclick="return runEffect('DropOut', 'product_box', {duration: 800, from: '100%', to: '0%', toggle: true},html_04)">
<img src="img/spry_4.gif" onmouseover="document.getElementById('spry4').src = 'img/spry_4a.gif';" onmouseout="document.getElementById('spry4').src = 'img/spry_4.gif';" id="spry4">
</a>
<a href="#" onclick="return runEffect('DropOut', 'product_box', {duration: 800, from: '100%', to: '0%', toggle: true},html_05)">
<img src="img/spry_5.gif" onmouseover="document.getElementById('spry5').src = 'img/spry_5a.gif';" onmouseout="document.getElementById('spry5').src = 'img/spry_5.gif';" id="spry5">
</a>
</center>
<div class="container2" id="product_box" align=center><img src=https://cdn.powergap.de/spry_x1.jpg style="margin-top:4px;"></div>
Über "Layout" > "Shopfenster" muss dann nur noch das entsprechende Banner aktiviert (hier: "Banner06") aktiviert und an die gewünschte Stelle verschoben werden.
Hier funktionieren keine Synonyme. Man kann in den Shopfenstern derzeit nur eigenes statisches HTML einsetzen. In einem späteren Step werden wir hier evtl. nette automatische Inhalte anbieten, die man dann per Synonym einbinden kann. Da könnte man sich z.B. Inhalte wie TOP10, Neuste Ratings, News, oder sonstiges vorstellen.
Da dies doch ein sehr komplexes Thema ist und für die Einrichtung fortgeschrittene HTML und Javascript-Kenntnisse nötig sind, können Sie uns gerne mit der Gestaltung und Einrichtung eines solchen Startseiten/- oder Shopfenster-Banners beauftragen.
Wir bitte um Verständnis, dass wir außerhalb der reinen "Einbindung" dieser Möglichkeit keinerlei Support für Fragen zu Javascript, HTML oder CSS anbieten können.