Archivlink: javarea.de Forum > JavaScript > Bilderwechsel inkl. Textwechsel mit blendTrans
Vollständigen Link anzeigen: javarea.de Forum > JavaScript > Bilderwechsel inkl. Textwechsel mit blendTrans

Pages: [1]
geschrieben von ItsMe am 31.03.2008 - 17:23
Hallo liebe Forengemeinde,

ich bin ganz neu hier und hab' gleich mal ein gigantisch großes Fragezeichen über meinem Kopf schweben (könnte allerdings auch ein riesengroßes Brett vor meinem Kopf sein ;) ) und hoffe Ihr könnt mir weiterhelfen!

Ich möchte eine Art Slideshow erstellen. Bilderwechsel soll per Mausklick auf das Bild erfolgen!
Das hab' ich auch hinbekommen *g* .. allerdings möchte ich jetzt jeweils unter dem Bild in einer eigenen Tabellenzeile auch noch einen jeweils zum Bild passenden Text ausgeben.

D.h. der Text in der darunterliegenden Tabellenzeile soll gemeinsam mit dem Bild wechseln!

Ich hoffe Ihr versteht was ich meine und ich wäre echt suuuuper dankbar für jeden Tipp!!!!!

Vielen Dank im Voraus für Eure Mühe

Und hier das bestehende Coding zum Bildwechsel:
Zitat
 
<head>
<script language="JScript" type="text/jscript">
Bild1 = new Image();
Bild1.src = "bild1.jpg";
Bild2 = new Image();
Bild2.src = "bild2.jpg";
Bild3 = new Image();
Bild3.src = "bild3.jpg";
Bild4 = new Image();
Bild4.src = "bild4.jpg";
Bild5 = new Image();
Bild5.src = "bild5.jpg";
Bild6 = new Image();
Bild6.src = "bild6.jpg";
Bild7 = new Image();
Bild7.src = "bild7.jpg";
Bild8 = new Image();
Bild8.src = "bild8.jpg";
Bild9 = new Image();
Bild9.src = "bild9.jpg";
Bild10 = new Image();
Bild10.src = "bild10.jpg";
Bild11 = new Image();
Bild11.src = "bild11.jpg";
Bild12= new Image();
Bild12.src = "bild12.jpg";


var Bild = 1;

function Bildwechsel () {
switch (Bild) {
case 1:
Bild = 2;
document.all.Bilder.filters.blendTrans.Apply();
document.all.Bilder.src = Bild2.src;
document.all.Bilder.filters.blendTrans.Play();
break;
case 2:
Bild = 3;
document.all.Bilder.filters.blendTrans.Apply();
document.all.Bilder.src = Bild3.src;
document.all.Bilder.filters.blendTrans.Play();
break;
case 3:
Bild = 4;
document.all.Bilder.filters.blendTrans.Apply();
document.all.Bilder.src = Bild4.src;
document.all.Bilder.filters.blendTrans.Play();
break;
case 4:
Bild = 5;
document.all.Bilder.filters.blendTrans.Apply();
document.all.Bilder.src = Bild5.src;
document.all.Bilder.filters.blendTrans.Play();
break;
case 5:
Bild = 6;
document.all.Bilder.filters.blendTrans.Apply();
document.all.Bilder.src = Bild6.src;
document.all.Bilder.filters.blendTrans.Play();
break;
case 6:
Bild = 7;
document.all.Bilder.filters.blendTrans.Apply();
document.all.Bilder.src = Bild7.src;
document.all.Bilder.filters.blendTrans.Play();
break;
case 7:
Bild = 8;
document.all.Bilder.filters.blendTrans.Apply();
document.all.Bilder.src = Bild8.src;
document.all.Bilder.filters.blendTrans.Play();
break;
case 8:
Bild = 9;
document.all.Bilder.filters.blendTrans.Apply();
document.all.Bilder.src = Bild9.src;
document.all.Bilder.filters.blendTrans.Play();
break;
case 9:
Bild = 10;
document.all.Bilder.filters.blendTrans.Apply();
document.all.Bilder.src = Bild10.src;
document.all.Bilder.filters.blendTrans.Play();
break;
case 10:
Bild = 11;
document.all.Bilder.filters.blendTrans.Apply();
document.all.Bilder.src = Bild11.src;
document.all.Bilder.filters.blendTrans.Play();
break;
case 11:
Bild = 12;
document.all.Bilder.filters.blendTrans.Apply();
document.all.Bilder.src = Bild12.src;
document.all.Bilder.filters.blendTrans.Play();
break;
case 12:
Bild = 1;
document.all.Bilder.filters.blendTrans.Apply();
document.all.Bilder.src = Bild1.src;
document.all.Bilder.filters.blendTrans.Play();
break;
}
}

</script>

</head>

<BODY>
<TABLE width=95% cellSpacing="0" cellPadding="0" border="0">
<tr><td width="120px">&nbsp;</td><td>&nbsp;</td></tr>
<tr><td width="120px">&nbsp;</td><td><img src="pfeil_rot.jpg"><b>blablabla</b></td></tr>
<tr><td width="120px">&nbsp;</td><td><span style="font-size:80%">Bitte auf das Bild klicken, um weiter zu blättern</span></td><td width="150px">&nbsp;</td></tr>
<tr><td width="120px">&nbsp;</td><td>&nbsp;</td><td width="120px">&nbsp;</td></tr>
<tr><td width="120px">&nbsp;</td><td align="left"><img id="Bilder" src="bild1.jpg" style="cursor:hand; filter:blendTrans(Duration=1, Transition=12)" onclick="Bildwechsel()" border="0" alt=""></td><td width="120px">&nbsp;</td></tr>
<tr><td width="120px">&nbsp;</td><td align="left">&nbsp;&nbsp;<a href="galerie.htm" target="_self">[zurück zur Bildergalerie]</a></td><td width="120px">&nbsp;</td></tr></table>
</BODY>
</HTML>

geschrieben von okley am 31.03.2008 - 19:05
Hallo

Wo hast denn dieses Script ausgegraben? Das ist nicht wirklich etwas was du heutzutage nützen solltest. Die meisten Javascript Befehle (document.all) sind veraltet. Zudem ist die Eigenschaft filter in CSS nur für Microsoft Browser gültig.

Ich finde deine Motivation gut ein Script deinen Bedürnissen anzupassen um zu lernen. Aber dann bedien dich doch gleich eines Scriptest welches auf dem Stand der Technik ist und lerne das was man Heute braucht. In Google findest du bestimmt haufenweise Links zu Javascript Image Slide Gallerien wo du dich inspirieren lassen kannst.

Wenn du kein gangbaren Weg findest mit einem anderen Script, dann meld dich einfach wieder.

geschrieben von ItsMe am 01.04.2008 - 12:56
Hallo okley,

danke für die Antwort (auch wenn die mir jetzt nicht wirklich weiter geholfen hat ).
Das blendTrans wird nur für den IE verwendet (ich frage den Browser ab).
Tja.. und das Script hab' ich vor ein paar Jahren mal selbst geschrieben..(damals allerdings für den Bildwechsel in einem OE Stationery.. aber sei's drum...)

Das Problem ist ja auch NICHT die Slideshow! Denn die funktioniert! (auch wenn die Technik veraltet ist )

Mein Problem ist, das ich gleichzeitig mit dem Bilderwechsel (der durch Klick auf's Bild gestartet wird) eben auch einen Textwechsel haben möchte!!!

Habe gestern schon gut und gerne 4-5 Stunden im Web gesurft um dazu ein Skript oder einen Lösungsansatz zu finden und bin leider nicht fündig geworden. Darum hatte ich mich ja auch hier ans Forum gewandt! Hoffe weiterhin das mir jemand bei diesem Problem vielleicht weiterhelfen kann.
Vielen Dank im Voraus.

geschrieben von okley am 01.04.2008 - 13:04
Schade verstehst du nicht was ich dir mitteilen wollte... Wollte dir nur auf die Sprünge helfen ein modernes, nicht proprietäres Script zu entwickeln.
Um dein Script wie gewünscht zum laufen zu bringen:
Du hast ja dein BildWechsel clickHandler. Da schreibst du in einem case einfach document.getElementById('textField').innerHtml = "bild nummer <i>1</i>"; zum Beispiel. Dann brauchst du nur noch ein Element mit der ID textField irgendwo in deine Tabellenstruktur einzufügen.

geschrieben von ItsMe am 01.04.2008 - 14:24
Doch ich glaube schon das ich Dich verstehe.. und Du hast natürlich auch vollkommen Recht!!!!
Werde mich ganz bestimmt auch in nächster Zeit nochmal näher damit auseinandersetzen - insofern auch nochmal danke für den Wink mit dem Laternenpfahl :-)

Ich möchte bzw. muss jetzt nur einfach auf die Schnelle eine Lösung für dieses vermaledeite Bild- und Textwechse-Problem haben.. und das hast Du mir ja jetzt wahrscheinlich auch geliefert :-) :-) :-).
Werde das gleich mal ausprobieren.. VIELEN DANK also dafür!!!!!!!!

Und wie gesagt: Werde Deinen Rat auf alle Fälle beherzigen und mal schauen ob ich was Besseres finde, was ich dann in aller Ruhe studieren und einfügen kann :-) Darum auch dafür nochmal: DANKE :-)


Powered by: JBB v.2.0.4 Copyright ©2000-2006, www.javarea.de.