Wie erstelle ich animierte Buttons ?
Die Animation der Buttons erfolgt per Java-Script, also z.B. so:
<![CDATA[
<script language="Javascript">
<!--
if (document.images) {
img1on=new Image();
img1on.src="grafik/willdown.gif";
img2on=new Image();
img2on.src="grafik/rotdown.gif";
img1off=new Image();
img1off.src="grafik/willup.gif";
img2off=new Image();
img2off.src="grafik/rotup.gif";
}
function imgOn(imgName) {
if (document.images) {
document[imgName].src=eval(imgName + "on.src");
}
}
function imgOff(imgName) {
if (document.images) {
document[imgName].src=eval(imgName + "off.src");
}
}
// -->
</script>
]]>
Der Aufruf erfolgt so:
<![CDATA[
<A HREF="welcome.htm" target="haupt" onMouseOver="imgOn('img1')" onMouseOut="imgOff('img1')">
<img border=0 SRC="grafik/willup.gif" name=img1></A><BR>
<a href="linklist.htm" target="haupt" onMouseOver="imgOn('img2')" onMouseOut="imgOff('img2')">
<img border=0 SRC="grafik/rotup.gif" name=img2></A><BR>
]]>
Das Ganze sieht dann so aus:
Die Buttons habe ich mit einer Shareware-Version von Paintshop erstellt.
Das funktioniert so:
1. Datei neu, Breite=100, Höhe=20
2. Ansichert vergrößern 5:1
3. Kontrollen Werkzeugeigenschaften: Auswahltyp=Rechteck, Randschärfe=1, Antialiasing ausgeschaltet
4. Ich platziere auf dem neuen Bild eine Auswahl die so groß ist wie die Aussparung des nicht aktivierten Buttons:
5. Mit Bild Effekte Aussparung (Bild) entsteht folgende Vertiefung:
6. Mit Ebenen Neu eine zweite Ebene anlegen.
7. Auswahl, keine Auswahl
8. Auf die neue Ebene wechseln und die Vertiefung markieren
9. Die Vertiefung mit der Zeichenfarbe auffüllen:
10. Auswahl, keine Auswahl
11. in den farbigen Bereich den Text einfügen:
12. Mit STRG F12 z.B. als Button1.gif abspeichern.
13. Die Ebene 2 ausschalten.
14. Mit Entf den Text löschen.
15. den Text in der Vordergrundfarbe einfügen und mit STRG F12 als z.B. Button2.gif abspeichern:
16. Die beiden Buttons sehen nun so aus:
17. Animiert man sie per Java-Script erzielt man erwünschten Effekt:
Ich wünsche viel Spass beim Erstellen der Buttons.;)
Wer will kann sich den Button als PSP-File hier downloaden.
P.S.: Über ein Feedback würde ich mich freuen. Ich kenne auch noch ein paar andere Tricks zu Povray und Paintshop.