Verlinkung von wechselnden Bildern (Slideshow)

[Neutro]

Hallo,

ich möchte eine Slideshow für eine Website erstellen, wo wechselnd Logos oder Bilder angezeigt werden. Dies funktioniert auch prima.
Jetzt würde ich die einzelnen Grafiken aber gerne auch noch mit einem Link versehen. Kann mir jemand helfen wie ich das mache?

Hier mal der Code wie es bis jetzt aussieht:


<script language="JavaScript">
<!--
verzoegerung = 3600;
bildNummer = 2;

bilder= new Array(); //nimmt die Bilder der Animation auf (ohne var weil global)

// hier werden die Bilder im Hintergrund geladen
for (i = 1; i <= 3; i++) {
bilder[i] = new Image();
bilder[i].src = "http://xyz.com/fileadmin/Inhalte/Logos/dp" + i + ".jpg";// Natürlich müssen jetzt in dem gleichen Ordner 3 Bilder mit den Namen dp1.gif bis dp3.gif liegen.
}

function naechstesBild() {
document.animation.src = bilder[bildNummer].src;

bildNummer++;
if (bildNummer > 3) bildNummer = 1;
}
// -->
</script>

<img src="http://xyz.com/fileadmin/Inhalte/Logos/dp1.jpg" name="animation" width="172" height="74" border="10" onLoad="setTimeout('naechstesBild()', verzoegerung)">


Vielen Dank!
LG

[kkapsner]

1. Das language-Attribut ist veraltet -> type="text/javascript"
2. In diesem Zusammenhang hättest du schon ein "var" schreiben können - du bist ja nicht in einer Funktion (zum testen:

var f = 3;
alert(window.f);

)
3. Du brauchst für deine Verlinkung um das <img> einen Link (<a href="">) - eine Referenz darauf bekommst du mit IMG_REFERENZ.parentNode und das href setzt du genauso wie das src des Bildes.
4. Ich würde hier anstatt mit document.animation mit document.getElementById("animation") + id="animation" arbeiten - Namen müssen nicht eindeutig sein und dann könnte es passieren, dass du bei document.animation eine HTMLCollection bekommst und nicht die <img>-Node.
5. Unser Forum ist sehr modern. Es unterstützt BBCode -> bitte das nächste Mal [ code ] verwenden.

[Neutro]

Vielen Dank für deine Antwort. Leider bin ich relativer Javascript Anfänger. Ich hab den bisherigen Code mit einem Freund gemacht und verstehe zwar ca. was du mir rätst, scheitere aber leider an der Umsetzung...

Könntest du mir vielleicht beispielsweise am Code zeigen wie ich das einbaue?

Danke dir!

[kkapsner]

Versuch's doch einfach mal und wir erklären dir dann warum es nicht funktioniert

[Neutro]

also... hab jetzt mal versucht das irgendwie einzubinden (wahrscheinlich falsch...). was mache ich mit IMG_REFERENZ.parentNode?

<type="text/javascript">
<!--
verzoegerung = 3600;
bildNummer = 2;

var f = 3;
alert(window.f);

// hier werden die Bilder im Hintergrund geladen
for (i = 1; i <= 3; i++) {
bilder[i] = new Image();
bilder[i].src = "http://xyz.com/fileadmin/Inhalte/Logos/dp" + i + ".jpg";// Natürlich müssen jetzt in dem gleichen Ordner 3 Bilder mit den Namen dp1.gif bis dp3.gif liegen.
}

function naechstesBild() {
document.getElementById("animation") + id="animation"

animation++;
if (animation > 3) animation = 1;
}
// -->
</script>

<img src="http://xyz.com/fileadmin/Inhalte/Logos/dp1.jpg" name="animation" width="172" height="74" border="10" onLoad="setTimeout('naechstesBild()', verzoegerung)">

<a href="www.xyz.com">

Bitte um Hilfe

[kkapsner]

OK - du hast mich teilweise völlig falsch verstanden...
In der Funktion naechstesBild sprichst du ja in deiner alten Funktion dein bild mit document.animation an. Das würde ich so nicht machen, sondern document.get.... und im <img> ein id="animation" - das sollte das "+" bedeuten.
Über das getElementById bekommst du eine Referenz auf deine <img>-Node geliefert (die du dann z.B. in einer Variablen speichern kannst)
Ansonsten muss der Link natürlich um das <img> herum positioniert sein.

[Neutro]

also so?:

<type="text/javascript">
<!--
verzoegerung = 3600;
bildNummer = 2;

var f = 3;
alert(window.f);

// hier werden die Bilder im Hintergrund geladen
for (i = 1; i <= 3; i++) {
bilder[i] = new Image();
bilder[i].src = "http://xyz.com/fileadmin/Inhalte/Logos/dp" + i + ".jpg";// Natürlich müssen jetzt in dem gleichen Ordner 3 Bilder mit den Namen dp1.gif bis dp3.gif liegen.
}

function naechstesBild() {
document.getElementById("animation")

animation++;
if (animation > 3) animation = 1;
}
// -->
</script>

<img src="http://xyz.com/fileadmin/Inhalte/Logos/dp1.jpg" id="animation" name="animation" width="172" height="74" border="10" onLoad="setTimeout('naechstesBild()', verzoegerung)">

<a href="www.xyz.com">

[kkapsner]

Jetzt bekommst du eine Referenz auf das Bild - aber du willst ja mit dem Bild noch etwas machen (so wie im oberen Code)... und das Bild ist immer noch nicht IM Link.

[Neutro]

Sorry dass ich etwas unbeholfen wirke aber ich verstehe jetzt nicht ganz was du meinst... bin leider relativ unerfahren was programmieren betrifft
Könntest du mir das vielleicht mal im Code markieren?

[kkapsner]

OK - ich zerlege dir mal die einzelnen Schritte:

function naechstesBild() {
	//erst einmal eine Referenz auf das Bild holen
	var img = document.getElementById("animation");
	//jetzt wollen wir das src ja neu setzten
	img.src = bilder[bildNummer].src;
	
	//jetzt holen wir uns eine Refernz auf den Link (wenn dieser mal richtig positioniert ist)
	var link = img.parentNode;
	//und setzten dessen href neu
	link.href = "WAS AUCH IMMER";
	
	animation++;
	if (animation > 3) animation = 1;
}

[Neutro]

aha... danke
also wenn ich das jetzt einbaue, wo positioniere ich dann den Link richtig? kann ich unter "was auch immer" irgendeinen Link nehmen? und wie weise ich die Links den verschiedenen Bildern zu?
Blicke da grad gar nicht durch...
Danke!

<type="text/javascript">
<!--
verzoegerung = 3600;
bildNummer = 2;

var f = 3;
alert(window.f);

// hier werden die Bilder im Hintergrund geladen
for (i = 1; i <= 3; i++) {
bilder[i] = new Image();
bilder[i].src = "http://xyz.com/fileadmin/Inhalte/Logos/dp" + i + ".jpg";// Natürlich müssen jetzt in dem gleichen Ordner 3 Bilder mit den Namen dp1.gif bis dp3.gif liegen.
}

function naechstesBild() {
	//erst einmal eine Referenz auf das Bild holen
	var img = document.getElementById("animation");
	//jetzt wollen wir das src ja neu setzten
	img.src = bilder[bildNummer].src;
	
	//jetzt holen wir uns eine Refernz auf den Link (wenn dieser mal richtig positioniert ist)
	var link = img.parentNode;
	//und setzten dessen href neu
	link.href = "WAS AUCH IMMER";
	
	animation++;
	if (animation > 3) animation = 1;
}
// -->
</script>

<img src="http://xyz.com/fileadmin/Inhalte/Logos/dp1.jpg" id="animation" name="animation" width="172" height="74" border="10" onLoad="setTimeout('naechstesBild()', verzoegerung)">

<a href="www.xyz.com">

[kkapsner]

Das <a> muss hald einfach das Bild umschließen:

<a href="">
	<img>
</a>

Bei "Was auch immer" kannst du einen beliebigen Link eintragen - wenn du natürlich für jedes Bild einen anderen Link haben willst musst du dir natürlich ein Array anlegen, das die richtigen Links enthält.

[Neutro]

Hi, vielen Dank! Habs mit etwas Spielen und Googeln hinbekommen und es funktioniert

[kkapsner]

Bitte.