Website selber erstellen - Tools, Widgets, Zubehör
Nachfolgend der Code des Javascripts.
<script type="text/javascript">
pictures = new Array(
"http://selber-machen-homepage.de/katzen/amor4wochen.jpg",
"http://selber-machen-homepage.de/katzen/andy4wochen.jpg",
"http://selber-machen-homepage.de/katzen/artur4wochen.jpg",
"http://selber-machen-homepage.de/katzen/aron4wochen.jpg",
"http://selber-machen-homepage.de/katzen/annabell4wochen.jpg",
"http://selber-machen-homepage.de/katzen/amor4wochen.jpg");
anz = 6;
bild = i + 1 + " von " +anz;
var intervalbig;
var intervalsmall;
var max;
var step;
function killinterval() {
clearInterval(intervalbig);
clearInterval(intervalsmall);
document.images['image'].width = 250;
}
function picbigger(a) {
document.images['image'].src = pictures[a];
document.images['image'].width = 0;
max = 250;
step = max / 20;
intervalbig = setInterval(picbiggerstep,15);
}
function picbiggerstep() {
document.images['image'].width += step;
if (document.images['image'].width > max) {
clearInterval(intervalbig);
}
}
function picsmaller(a) {
newpic = a;
intervalsmall = setInterval(picsmallerstep,15);
}
function picsmallerstep() {
document.images['image'].width -= step;
if (document.images['image'].width < 20) {
clearInterval(intervalsmall);
picbigger(newpic);
}
}
</script>
<style type="text/css">
.imgbox{padding=5px; background:#cccccc; text-align:center; vertical-align:center;}
.imgbox:hover{background:#555; }
</style>
Im Code findet man zwei Funktionspaare picbigger/picbidggerstep und picsmaller/picsmallerstep, die nach dem gleichen Funktionsprinzip arbeiten. Die erste Funktion setzt die notwendigen Parameter und startet dann mit setInterval(function, Zeitintervall) den wiederholten Aufruf der als Parameter festgelegten Funktion.
Das Zeitintervall wird in Millisekunden festgelegt. Der Aufruf erfolgt in Form einer Zuweisung zu einer Variablen, die man durch die Funktion clearIntervall(Variable) löschen kann, womit dann auch die Ausführung weiterer Wiederholungen stoppt.
Das Stoppen erfolgt in den jeweiligen ...step-Funktionen nach Prüfung der Endebedingungen bzw. in der Funktion killinterval, welche alle Intervalle löscht und das aktuelle Bild auf Ausgangsgröße zurückstellt. Der Aufruf von killintervall erfolgt immer beim Verlassen eines Bildes, damit nicht mehrere Funktionsaufrufe parallel laufen.
In den ...step-Funktionen wird einfach nur die width-Eigenschaft von "image" verändert. Als Abbruchwert für die Endebedingung bei der smallerstep-Funktion muss die Anzahl des Steppdivisors verwendet werden, da sonst ein Laufzeitfehler erfolgt, weil versucht wird, der width-Eigenschaft einen negativen Wert zu zuweisen.