JavaScripte, Teil 1

JavaScripte, Teil 1

Wichtige Hinweise! Die hier vorgestellten JavaScripte werden in den HTML-Code der MICH-Seiten oder Angebotsseiten von ebay eingebaut und erzeugen dort tolle Effekte. Jedoch kann ein falsch oder unvollständig eingebauter Code zu extremen Fehlfunktionen bei ebay führen!!! Ich empfehle daher dringend, die Beispiele auf dieser Seite nicht für Experimente innerhalb ebay zu verwenden und sich an JavaScript nur heran zu wagen, wenn man 100pro weiß, was man tut!
Wichtig ist, die Codes jeweils unverändert zu übernehmen. Wenn Variationen möglich oder nötig sind, habe ich sie rot angegeben, sonst bitte nichts verändern!

Inhalt dieser Seite:

Blinkender Text

Automatische Bildershow

Perlenschnur-Mausverfolger

Blinkender Text

Beschreibung:

Eine Möglichkeit zum Hervorheben wichtiger Textabschnitte ist das Blinken. Der hier vorgestellte Code läßt Text in verschiedenen Farben und mit einstellbarer Frequenz blinken.
Im Netscape Communicator 4.x blinkt der Text leider nur schwarz/farblos und nur mit festgelegter Standard-Frequenz, im Internet Explorer und im Netscape Communicator 6.x (sowie weiteren Browsern, die DOM / JavaScript 1.5 verstehen) ist auch ein Farbwechsel und die Variation der Blinkfrequenz möglich.

Beispiel:

Der Effekt kann in einen Text eingebaut werden, so daß nur einzelne Worte blinken, oder man bastelt daraus eine große

BLINKENDE ÜBERSCHRIFT

Quellcode
aus HTML
und JavaScript:

<blink><span id="farbwechsel" style="font-family:Arial,Avalon,sans-serif; font-size:24pt;"><b>BLINKENDE ÜBERSCHRIFT</b></span></blink>

<script language="JavaScript">
<!--
function wechsel1()
{ 
document.getElementById("farbwechsel").style.color = "fuchsia";
window.setTimeout("wechsel2()",500);
}
function wechsel2()
{
document.getElementById("farbwechsel").style.color = "yellow";
window.setTimeout("wechsel1()",500);
}
wechsel1();
//-->
</script>

Einbau
und nötige
Anpassungen:

Markiere den kompletten Quelltext und kopiere ihn dorthin, wo später der blinkende Text erscheinen soll.

Folgende Anpassungen sind nötig:

<blink>BLINKENDE ÜBERSCHRIFT</blink>
In dieser Befehlsfolge wird die Formatierung des blinkenden Textes festgelegt. Im Beispiel ist es Text in Arial 24 Punkt fett, und der blinkende Text lautet "BLINKENDE ÜBERSCHRIFT". Für normal großen blinkenden Text würde das so aussehen:
<blink>normaler Text</blink>

document.getElementById("farbwechsel").style.color = "fuchsia";
window.setTimeout("wechsel2()",500);
Abschließend erfolgt noch die Bestimmung der Farben und der Anzeigedauer der einzelnen Farben. Im Beispiel ist die erste Farbe "fuchsia", und sie wird 500ms = 0,5s lang angezeigt. In der zweiten, identischen Funktion (weiter unten) werden Farbe und Zeit für die zweite Blinkfarbe angegeben. Die Farben müssen unterschiedlich sein.

Man kann auch mit den Farben und Zeiten experimentieren. Eine dunkle erste Farbe mit langer Zeit und eine leuchtende zweite Farbe mit kurzer Zeit ergibt z.B. einen auffälligen Blitzeffekt.

Es lassen sich auch weitere identische Funktionen (jeweils mit eigener Farbangabe) einfügen, so daß an Stelle des zweifarbigen Blinkens ein mehrfarbiger Effekt entsteht.

Automatische Bildershow

Beschreibung:

Diese Script wurde entwickelt, um die (kostenpflichtige) Bildershow von ebay zu ersetzen. Dabei waren spezielle Programmiertricks nötig, um den spezifischen Bedingungen bei ebay zu genügen, ohne das System zu stören. Die Bildershow sollte mit allen gängigen Browsern funktionieren (garantieren kann ich das natürlich nicht). Sie setzt mehrere Bilder mit gleichen Abmessungen voraus.

Beispiel:

Quellcode
aus HTML
und JavaScript:

<center>

<img src="http://www.thuringix.de/hilfe/java/01.jpg" width="320" height="240" border="1">

<script type="text/javascript">
<!--
var qb = new Array();
qb[0] = new Image(); 
qb[0].src = "http://www.thuringix.de/hilfe/java/01.jpg";
qb[1] = new Image(); 
qb[1].src = "http://www.thuringix.de/hilfe/java/02.jpg";
qb[2] = new Image(); 
qb[2].src = "http://www.thuringix.de/hilfe/java/03.jpg";
qb[3] = new Image(); 
qb[3].src = "http://www.thuringix.de/hilfe/java/04.jpg";
qb[4] = new Image(); 
qb[4].src = "http://www.thuringix.de/hilfe/java/05.jpg";

var qa = 5; // Anzahl der Bilder
var qt = 2000; // Anzeigedauer pro Bild
var qi = -1;
var qf = 0;
var qz = document.images.length - 1;
qa --;
var qn = qa;

function prev()
{
qi --;
if (qi < 0) qi = qa;
document.images[qz].src = qb[qi].src;
}

function next()
{
qi ++;
if (qi > qn) qi = 0;
document.images[qz].src = qb[qi].src;
}

function delay()
{
if (qf == 0) next();
window.setTimeout("delay()",qt);
}

delay();
//-->
</script>
<br>

<input style="width:80px; vertical-align:middle; border-width:4px; border-style:outset; border-color:#f7f7f7; padding:1px; cursor:pointer; color:#000000; font-size:14px; font-weight:bold; background-color:gainsboro;" type="button" onFocus="this.blur()" onMouseOver="this.style.borderStyle='inset'; this.style.backgroundColor='silver';" onMouseOut="this.style.borderStyle='outset'; this.style.backgroundColor='gainsboro';" 
onMouseDown="qf=1;" value="stop" title="hält die Bildershow an">

<input style="width:80px; vertical-align:middle; border-width:4px; border-style:outset; border-color:#f7f7f7; padding:1px; cursor:pointer; color:#000000; font-size:14px; font-weight:bold; background-color:gainsboro;" type="button" onFocus="this.blur()" onMouseOver="this.style.borderStyle='inset'; this.style.backgroundColor='silver';" onMouseOut="this.style.borderStyle='outset'; this.style.backgroundColor='gainsboro';" 
onMouseDown="qf=0;" value="continue" title="setzt die Bildershow fort">

<input style="width:4px; vertical-align:middle; border-width:2px; border-style:outset; border-color:#f7f7f7; background-color:gainsboro;" type="button">

<input style="width:80px; vertical-align:middle; border-width:4px; border-style:outset; border-color:#f7f7f7; padding:1px; cursor:pointer; color:#000000; font-size:14px; font-weight:bold; background-color:gainsboro;" type="button" onFocus="this.blur()" onMouseOver="this.style.borderStyle='inset'; this.style.backgroundColor='silver';" onMouseOut="this.style.borderStyle='outset'; this.style.backgroundColor='gainsboro';" 
onMouseDown="prev();" value="prev pic" title="zeigt das vorherige Einzelbild">

<input style="width:80px; vertical-align:middle; border-width:4px; border-style:outset; border-color:#f7f7f7; padding:1px; cursor:pointer; color:#000000; font-size:14px; font-weight:bold; background-color:gainsboro;" type="button" onFocus="this.blur()" onMouseOver="this.style.borderStyle='inset'; this.style.backgroundColor='silver';" onMouseOut="this.style.borderStyle='outset'; this.style.backgroundColor='gainsboro';" 
onMouseDown="next();" value="next pic" title="zeigt das nächste Einzelbild">

</center>

Einbau
und nötige
Anpassungen:

Markiere den kompletten Quelltext und kopiere ihn dorthin, wo später die Bildershow erscheinen soll.

Folgende Anpassungen sind nötig:

<img src="http://www.thuringix.de/hilfe/java/01.jpg" width="320" height="240" border="1">
Hier muß die Adresse des ersten Bildes stehen, weiterhin werden Breite und Höhe der Bilder festgelegt. Da dies nur ein Platzhalter ist, wird die Adresse des ersten Bildes weiter unten noch einmal benötigt.

qb[0] = new Image();
qb[0].src = "http://www.thuringix.de/hilfe/java/01.jpg";
qb[1] = new Image();
qb[1].src = "http://www.thuringix.de/hilfe/java/02.jpg";
qb[2] = new Image();
qb[2].src = "http://www.thuringix.de/hilfe/java/03.jpg";
qb[3] = new Image();
qb[3].src = "http://www.thuringix.de/hilfe/java/04.jpg";
qb[4] = new Image();
qb[4].src = "http://www.thuringix.de/hilfe/java/05.jpg";
Hier werden (mit 0 beginnend) die Adressen der einzelnen Bilder angegeben. Im Beispiel
sind 5 Bilder vorgesehen, bei weniger Bildern müssen die nicht benötigten Zeilen gelöscht werden (je 2 Zeilen pro Bild).

var qa = 5; // Anzahl der Bilder
Hier ist die Angabe der Anzahl der Bilder erforderlich.

var qt = 2000; // Anzeigedauer pro Bild
Zum Schluß wird noch die Anzeigedauer pro Bild vorgegeben. Die Angabe erfolgt in Millisekunden, 2000 entstpricht somit einer Dauer von 2 Sekunden. Kleinere Werte lassen die Show schneller laufen, größere langsamer.

Der weitere Quellcode wird unverändert übernommen.

Perlenschnur-Mausverfolger

Beschreibung:

Mausverfolger gibt es ja viele, aber dieser dient gleichzeitig als nettes "Spielzeug". Mit komplizierten mathematischen Funktionen wird das Verhalten einer Perlenschnur aus Gummi perfekt nachgebildet.
Achtung! Dieses Script funktioniert leider nur im Internet Explorer.

Beispiel:

Quellcode
aus HTML
und JavaScript:

<!-- Mausverfolger beginnt hier -->
<div id="dot0" style="position: absolute; visibility: hidden;">
<img src="http://www.thuringix.de/bilder/dummy.gif">
</div>

<div id="dot1" style="position: absolute;">
<img src="http://www.thuringix.de/hilfe/java/yellowball.gif">
</div>

<div id="dot2" style="position: absolute;">
<img src="http://www.thuringix.de/hilfe/java/blueball.gif">
</div>

<div id="dot3" style="position: absolute;">
<img src="http://www.thuringix.de/hilfe/java/redball.gif">
</div>

<div id="dot4" style="position: absolute;">
<img src="http://www.thuringix.de/hilfe/java/greenball.gif">
</div>

<div id="dot5" style="position: absolute;">
<img src="http://www.thuringix.de/hilfe/java/pinkball.gif">
</div>

<div id="dot6" style="position: absolute;">
<img src="http://www.thuringix.de/hilfe/java/cyanball.gif">
</div>

<script LANGUAGE="JavaScript">
/*
Elastic Trail script (By Philip Winston @ pwinston@yahoo.com, URL:http://members.xoom.com/ebullets)
Script featured on Dynamicdrive.com
For this and 100's more DHTML scripts, visit http://dynamicdrive.com
*/

// Thanks to Troels Jakobsen <tjak@get2net.dk>
// for fix which makes it work when the page is scrolled

var nDots = 7;
if (document.all&&window.print)
document.body.style.cssText="overflow-x:hidden;overflow-y:scroll"
var Xpos = 0;
var Ypos = 0;
var DELTAT = .01;
var SEGLEN = 10;
var SPRINGK = 10;
var MASS = 1;
var GRAVITY = 50;
var RESISTANCE = 10;
var STOPVEL = 0.1;
var STOPACC = 0.1;
var DOTSIZE = 11;
var BOUNCE = 0.75;
var isNetscape = navigator.appName=="Netscape";
var followmouse = true;
var dots = new Array();
init();

function init()
{
    var i = 0;
    for (i = 0; i < nDots; i++) {
        dots[i] = new dot(i);
    }
        for (i = 0; i < nDots; i++) {
        dots[i].obj.left = dots[i].X;
        dots[i].obj.top = dots[i].Y;
    }
            setTimeout("startanimate()", 2000);
}

function dot(i) {
 this.X = Xpos;
 this.Y = Ypos;
 this.dx = 0;
 this.dy = 0;
 if (document.getElementsByTagName) {
  this.obj = document.getElementsByTagName("div")["dot"+i].style;
 } else if (document.all) {
  this.obj = document.all.tags("div")["dot"+i].style;
 } else if (document.layers) {
  this.obj = document.layers["dot"+i];
 }
}

function startanimate() {
    setInterval("animate()", 20);
}

function setInitPositions(dots)
{
    var startloc = document.all.tags("LI");
    var i = 0;
    for (i = 0; i < startloc.length && i < (nDots - 1); i++) {
        dots[i+1].X = startloc[i].offsetLeft
            startloc[i].offsetParent.offsetLeft - DOTSIZE;
        dots[i+1].Y = startloc[i].offsetTop +
            startloc[i].offsetParent.offsetTop + 2*DOTSIZE;
    }
    dots[0].X = dots[1].X;
    dots[0].Y = dots[1].Y - SEGLEN;
}

function MoveHandler(e)
{
    Xpos = e.pageX;
    Ypos = e.pageY;
    return true;
}

function MoveHandlerIE() {
    Xpos = window.event.x + document.body.scrollLeft;
    Ypos = window.event.y + document.body.scrollTop;
}
    document.onmousemove = MoveHandlerIE;

function vec(X, Y)
{
    this.X = X;
    this.Y = Y;
}

function springForce(i, j, spring)
{
    var dx = (dots[i].X - dots[j].X);
    var dy = (dots[i].Y - dots[j].Y);
    var len = Math.sqrt(dx*dx + dy*dy);
    if (len > SEGLEN) {
        var springF = SPRINGK * (len - SEGLEN);
        spring.X += (dx / len) * springF;
        spring.Y += (dy / len) * springF;
    }
}

function animate() {
    var start = 0;
    if (followmouse) {
        dots[0].X = Xpos;
        dots[0].Y = Ypos;
        start = 1;
    }

    for (i = start ; i < nDots; i++ ) {

        var spring = new vec(0, 0);
        if (i > 0) {
            springForce(i-1, i, spring);
        }
        if (i < (nDots - 1)) {
            springForce(i+1, i, spring);
        }

        var resist = new vec(-dots[i].dx * RESISTANCE,
            -dots[i].dy * RESISTANCE);

        var accel = new vec((spring.X + resist.X)/ MASS,
            (spring.Y + resist.Y)/ MASS + GRAVITY);

        dots[i].dx += (DELTAT * accel.X);
        dots[i].dy += (DELTAT * accel.Y);

        if (Math.abs(dots[i].dx) < STOPVEL &&
            Math.abs(dots[i].dy) < STOPVEL &&
            Math.abs(accel.X) < STOPACC &&
            Math.abs(accel.Y) < STOPACC) {
            dots[i].dx = 0;
            dots[i].dy = 0;
        }

        dots[i].X += dots[i].dx;
        dots[i].Y += dots[i].dy;

        var height, width;
        {
            height = document.body.clientHeight + document.body.scrollTop;
            width = document.body.clientWidth + document.body.scrollLeft;
        }

        if (dots[i].Y >=  height - DOTSIZE - 1) {
            if (dots[i].dy > 0) {
                dots[i].dy = BOUNCE * -dots[i].dy;
            }
            dots[i].Y = height - DOTSIZE - 1;
        }
        if (dots[i].X >= width - DOTSIZE) {
            if (dots[i].dx > 0) {
                dots[i].dx = BOUNCE * -dots[i].dx;
            }
            dots[i].X = width - DOTSIZE - 1;
        }
        if (dots[i].X < 0) {
            if (dots[i].dx < 0) {
                dots[i].dx = BOUNCE * -dots[i].dx;
            }
            dots[i].X = 0;
        }

        dots[i].obj.left = dots[i].X;
        dots[i].obj.top =  dots[i].Y;
    }
}
</script>
<!-- Mausverfolger endet hier -->

Einbau
und nötige
Anpassungen:

Markiere das komplette Script und kopiere es an den Anfang Deines Quellcodes. Anpassungen sind nicht nötig, das Script ist sofort funktionsfähig.

Die Perlenkette kann auch aus gleichfarbigen Kugeln oder völlig anderen Objekten bestehen. Dazu müssen nur die sechs Grafikbefehle am Anfang des Scriptes ("dot1" bis "dot6") auf die gewünschten Grafiken abgeändert werden.