• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

problem mit bilder animation hyperlink

D

dupey

New member
Hallo,

habe hier folgendes problem mit der animation der Bilder ..
Es wird alles genau so angezeigt wie ich will .. alles passt perfekt, nur muss für jedes Bild einen anderen Hyperlink setzen.
Also das test1 zb nach google verlinkt und test2 yahoo .. kriege das leider nicht gebacken.
Ich hoffe um hilfe und bedanke mich im vorraus.


<html><head><title>Test</title>
</head><body>
<img src="test1.jpg" width="180" height="405" alt="banner"></a>
<script type="text/javascript">
var b = new Array();
b[0] = new Image(); b[0].src = "test1.jpg";
b[1] = new Image(); b[1].src = "test2.jpg";
var i = 0;
function Animation () {
if (i > 1)
i = 0;
document.images[0].src = b.src;
i = i + 1;
window.setTimeout("Animation()", 4000);
}

window.setTimeout("Animation()", 1000);
</script>
</body></html>
 
Lege für die URs, auf die verlinkt wird, ebenfalls ein Array an. Dann im HTML ein a-href-Tag mit ID:
HTML: 
<a href="link_fuer_bild1" id="id_a"><img src="test1.jpg" width="180" height="405" alt="banner"></a>
In deiner Funktion Animation änderst Du dann zusätzlich den Link:
Code: 
function Animation () {
if (i > 1)
i = 0;
document.images[0].src = b[i].src;
[B]document.getElementById('id_a').href = l[i];[/B]
i = i + 1;
window.setTimeout("Animation()", 4000);
}
 
Mann Leute... irgendwie fühle ich mich wie eine Schallplatte mit Sprung...

1. Globale Variablen sind schlecht, unsicher, extrem unhandlich, schlecht zu warten und sollten einfach nicht verwendet werden. Besonders globale Variablen mit sehr gebräuchlichen Namen (wie z.B. "i") haben ein besonderes Fehlerpotential. In sochen Fällen, in denen man einen Speicherort zwischen den Funktionsaufrufen braucht, kann man globalen Variablen eliminieren, indem man entweder einen zusätzlichen Scope erzeugt:
Code: 
(function(){
	var i = 0;
	window.Animation = function(){...};
})()
oder an das Funktionsobjekt die "Variable" als Eigenschaft anfügt:
Code: 
function Animation(){
	if (!Animation.i){
		Animation.i = 0;
	}
	if (Animation.i > 1){
		Animation.i = 0;
	}
	...
}

2. window.setTimeout() sollte man als Parameter keinen String, sondern eine Funktionsreferenz übergeben:
Code: 
window.setTimeout(Animation, 4000);

3. Formatiert euren Code gescheit. Hier im Forum erhöht das die Bereitschaft zu helfen enorm und erleichtert uns das Einlesen. Euch selber hilft es, den Code auch noch nach mehr als einer Woche, in der ihr nicht auf den Code geschaut habt, wieder zu verstehen - glaubt mir, ich weiß wovon ich spreche. Ihr müsst ja nicht meine Fehler nochmal machen.

PS: In JS gibt es die Konvention, dass Funktionen, die mit einem Großbuchstaben anfangen, Construktoren sind. Hier ist das eine ganz normale Funktion und sollte "animation" geschrieben werden. Ich habe es in den obigen Codebeispielen aus Konsistenzgründen so gelassen.
 
Zuletzt bearbeitet:
kkapsner schrieb:
oder an das Funktionsobjekt die "Variable" als Eigenschaft anfügt
Zum Vergrößern anklicken....
die dann aber statisch ist

kkapsner schrieb:
PS: In JS gibt es die Konvention, dass Funktionen, die mit einem Großbuchstaben anfangen, Construktoren sind.
Zum Vergrößern anklicken....
es gibt diese Konvention, neben vielen anderen, aber nicht für JS, sondern für ein unternehmen, ein projekt oder einfach für jemanden persöhnlich. das kann in einem anderen unternehmen/projekt/person wieder ganz anders sein.
 
Freue mich immer, wenn ich etwas dazu lernen kann.
oder an das Funktionsobjekt die "Variable" als Eigenschaft anfügt:
Code: 
function Animation(){
	if (!Animation.i){
		Animation.i = 0;
	}
	if (Animation.i > 1){
		Animation.i = 0;
	}
	...
}
Zum Vergrößern anklicken....
Bleibt dann - anders als bei einer lokalen Variable - der Wert über verschiedene Aufrufe hinweg erhalten?

PS: Auch die erste Variante würde ich gern verstehen, aber nur von dem Codeschnipsel her
Code: 
(function(){
	var i = 0;
	window.Animation = funciton(){...};
})()
Zum Vergrößern anklicken....
erschließt sich mir die Anwendung leider nicht. Kannst Du mal das Beispiel des TO auf diese Variante umstellen?
 
Zuletzt bearbeitet:
hesst schrieb:
die dann aber statisch ist
Zum Vergrößern anklicken....
diesen Kommentar verstehe ich nicht. Die Eigenschaft ist durchaus noch änderbar...

hesst schrieb:
es gibt diese Konvention, neben vielen anderen, aber nicht für JS, sondern für ein unternehmen, ein projekt oder einfach für jemanden persöhnlich. das kann in einem anderen unternehmen/projekt/person wieder ganz anders sein.
Zum Vergrößern anklicken....
Das ist schon war, aber schon der JS-Sprachkern hat diese Konvention und ich hatte das Gefühl, dass da keine Projekt-/Unternehmenskonvention dahinter steht. Wenn man also als Anfänger noch keine persönliche Konvention hat, ist es einfacher, sich die des Sprachkerns anzueignen...

Sempervivum schrieb:
Bleibt dann - anders als bei einer lokalen Variable - der Wert über verschiedene Aufrufe hinweg erhalten?
Zum Vergrößern anklicken....
Ja.

Zum PS:
Code: 
(function(){
	var i = 0;
	window.animation = function animation(){
		if (i >= b.length){
			i = 0;
		}
		document.images[0].src = b[i].src;
		document.getElementById('id_a').href = l[i];
		i++;
		window.setTimeout(animation, 4000);
	}
})();
- hier ist noch ein kleines Gadget versteckt... mal sehen, wer's findet.
 
kkapsner schrieb:
diesen Kommentar verstehe ich nicht. Die Eigenschaft ist durchaus noch änderbar...
Zum Vergrößern anklicken....
man kann aber keine 2 animationen gleichzeitig laufen lassen, dass heisst du hast eigentlich das was du mit globalen variablen hast, du überschreibst dir bei 2 animationen die "statische" variable i am funktionsobjekt.

Code: 
function Animation(idx)
{
  idx = idx || 0;
  
  // tu was

  if (++idx < abbruchbedingung)
  {
    window.setTimeout(function(){Animation (idx);}, 4000);
  }
}
Animation();
Animation();
 
Zuletzt bearbeitet:
Ach so... ja stimmt - die Variable ist fest an das Funktionsobjekt gebunden. Ist aber bei der "gescopten" Variante auch so. Um mehrere Animationen laufen lassen zu können, muss man bei der Initialisierung eine Funktion erstellen, die dann über window.setTimeout aufgerufen wird. Ob die Laufvariable dann über den Scope oder eine Eigenschaft am Funktionsobjekt realisiert wird, ist eigentlich egal.

Dein Ansatz ist auch interessant. Im Grunde genommen eine Abwandlung des Scopeansatzes. Ist aber nicht so performant, da bei jedem Timeout eine neue Funktion erstellt wird - der Overhead ist zwar wahrscheinlich vernachlässigbar, aber nur um es zu erwähnen. (V.A. bei 4000 ms Timeoutzeit.)

Ich würde das so machen:
Code: 
function animation(){
	var idx = 0;
	function run(){
		// tu was
		idx++;
		if (idx < abbruchbedingung){
			window.setTimeout(run, 4000);
		}
	}
	run();
}
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben