Link Animation

Mit einfachen Mitteln große Effekte erzielen...
Das kann man bei diesem kleinen Menü-Script sehen.
Da es komplett auf HTML basiert kann man auch in Frames einsetzen, denn die Links
werden einfach mit dem Target-Befehl gesetzt.

Text 1

Text 2

Text 3

Text 4

Text 5

Text 6

Text 7

Text 8

Text 9

Text 10

Diese beiden Grafiken werden benötigt, können aber auch gegen andere ausgetauscht werden.
Einfach mit der rechten Maustaste anklicken und dann speichern unter....

HTML-Einbindung
   <SCRIPT TYPE="TEXT/JAVASCRIPT" LANGUAGE="JAVASCRIPT"> // Linkanim v1.0 // (c) 1999 Stephan Schmidt / slaVescream // Dieses Javascript rotiert die Highlight Graphiken mehrerer Links, so lange // die Maus keinen der Links beruehrt. // Unterstuetzt nur eine Highlight und eine Normal Graphik fuer alle Links. // Benoetigt das "Image" Objekt, also Netscape 3.0+ oder MSIE 4.0+ // Vor dem Einsatz auf eigenen Seiten, also den benutzten Browser ueberpruefen! // Dieses Script darf frei weitergegeben und in eigenen Web-Seiten verwendet // werden, so lange Credits im Script angegeben werden. // Aufruf: // <body bgcolor="#87CEFA"> Tag : <BODY onLoad="startanim(1);"> // Bei jedem Link: // <A HREF="..." onMouseOver="stopanim(linknr,statustext); return true;" onMouseOut="startanim(linknr);return true;" // wobei 'linknr' und 'statustext' fuer jeden individuell verschieden sind. // Variablen definieren // Ueber diese Variablen kann alles wichtige gesteuert werden: var picks = 10; // Anzahl der verschiedenen Punkte var seks = 0.2; // Wechselgeschwindigkeit in Sekunden var wait = 1; // Verzoegerung, wenn nichts angewaehlt ist in Sekunden var standardtext = 'Bitte waehlen...' // Text der in der Statuszeile steht, // waehrend anim laeuft. picnames = new Array(picks); // Namen der einzelnen Punkte, die angesprungen picnames[1] = 'link01'; // werden. Muessen im <IMG> Tag mit dem picnames[2] = 'link02'; // "NAME" Attribut angegeben werden. picnames[3] = 'link03'; picnames[4] = 'link04'; picnames[5] = 'link05'; picnames[6] = 'link06'; picnames[7] = 'link07'; picnames[8] = 'link08'; picnames[9] = 'link09'; picnames[10] = 'link10'; // Preload normal = new Image(); normal.src = "1.gif"; highlight = new Image(); highlight.src = "2.gif"; // Ende der Konfiguration var pick = 1; var time_id=null; var animate = true; // Animation nach dem Laden starten function doanim() // Animation laufen lassen { if (animate) // soll sie ueberberhaupt? { chgfx(normal.src,picnames[pick],standardtext); // alten Punkt zuruecksetzen pick++; // naechsten Punkt anwaehlen if (pick>picks) // max erreicht? { pick=1; } chgfx(highlight.src,picnames[pick],standardtext); setTimeout("doanim()",seks*1000); // und wieder aufrufen... } } function startanim(startnr) // Animation starten { clearTimeout(time_id); // Damit nicht mehrere Task gleichzeitig laufen chgfx(normal.src,picnames[startnr],standardtext); animate = true; pick = startnr; pick=pick-1; if (pick<=0) pick=picks; time_id=setTimeout("doanim()",wait*1000); } function stopanim(zielnr, text) // Animation anhalten und richtigen // Punkt anaehlen { clearTimeout(time_id); // Anim stoppen chgfx(normal.src,picnames[pick],' '); // Aktuellen Punkt zuruecksetzen chgfx(highlight.src,picnames[zielnr],text); // Highlight auf gewaehlten Punkt animate=false; } // Bild in "ziel" durch "quelle" ersetzen und "text" in der Statusleiste anzeigen function chgfx(quelle, ziel, text) { document[ziel].src = [quelle]; window.status = [text]; return true; } </SCRIPT> <A onMouseOver="stopanim(1,'Link Nr.01');return true;" onMouseOut="startanim(1);return true;" HREF="http://www.abo.java24.net" target="_blank"><IMG NAME="link01" SRC="1.gif" WIDTH=15 HEIGHT=15 BORDER="0"></A> Text 1 <A onMouseOver="stopanim(2,'Link Nr.02');return true;" onMouseOut="startanim(2);return true;" HREF="http://"><IMG NAME="link02" SRC="1.gif" WIDTH=15 HEIGHT=15 BORDER="0"></A> Text 2 <A onMouseOver="stopanim(3,'Link Nr.03');return true;" onMouseOut="startanim(3);return true;" HREF="http://"><IMG NAME="link03" SRC="1.gif" WIDTH=15 HEIGHT=15 BORDER="0"></A> Text 3 <A onMouseOver="stopanim(4,'Link Nr.04');return true;" onMouseOut="startanim(4);return true;" HREF="http://"><IMG NAME="link04" SRC="1.gif" WIDTH=15 HEIGHT=15 BORDER="0"></A> Text 4 <A onMouseOver="stopanim(5,'Link Nr.05');return true;" onMouseOut="startanim(5);return true;" HREF="http://"><IMG NAME="link05" SRC="1.gif" WIDTH=15 HEIGHT=15 BORDER="0"></A> Text 5 <A onMouseOver="stopanim(6,'Link Nr.06');return true;" onMouseOut="startanim(6);return true;" HREF="http://"><IMG NAME="link06" SRC="1.gif" WIDTH=15 HEIGHT=15 BORDER="0"></A> Text 6 <A onMouseOver="stopanim(7,'Link Nr.07');return true;" onMouseOut="startanim(7);return true;" HREF="http://"><IMG NAME="link07" SRC="1.gif" WIDTH=15 HEIGHT=15 BORDER="0"></A> Text 7 <A onMouseOver="stopanim(8,'Link Nr.08');return true;" onMouseOut="startanim(8);return true;" HREF="http://"><IMG NAME="link08" SRC="1.gif" WIDTH=15 HEIGHT=15 BORDER="0"></A> Text 8 <A onMouseOver="stopanim(9,'Link Nr.09');return true;" onMouseOut="startanim(9);return true;" HREF="http://"><IMG NAME="link09" SRC="1.gif" WIDTH=15 HEIGHT=15 BORDER="0"></A> Text 9 <A onMouseOver="stopanim(10,'Link Nr.10');return true;" onMouseOut="startanim(10);return true;" HREF="http://"><IMG NAME="link10" SRC="1.gif" WIDTH=15 HEIGHT=15 BORDER="0"></A> Text 10

Hier kannst Du Dir das Javascript einfach per eMail zusenden lassen.

Mail:

Name:

Abo
Wenn Du den Newsletter beziehen möchtest, klicke bitte in das Feld "Abo"