Ergebnis 1 bis 9 von 9
  1. #1
    Avatar von def den
    def den ist offline Doppel-As
    registriert
    30-06-2005
    Ort
    Wolfsburg
    Beiträge
    107

    wechselnder text

    und nochmal das schöne galerie-script.
    hier habe ich die problemstellung, dass zu jedem bild ein individueller text zu sehen sein soll. aber wie mache ich das, da die behandlung der bilder im script eh etwas unkonventionell ist, soweit ich das beurteilen kann.

    Code:
    <!------------------------------------KONKRETE NAVIGATION------------------------------->
    <a href="javascript:getPos(-1)" onmousedown="XXXXXXXXXXXX" >zurück</a>
    &nbsp;&nbsp;
    <a href="javascript:getPos(1)" onmousedown="XXXXXXXXXXXX">vor</a>
    </center>
    
    </td>
    </tr>
    <tr>
    <td>
    
    
    <script language=javascript>
    ////////////////////////////////////////////////
    // dmx slidershow by robert engelhardt © 2003 //
    //              womstar@uni.de                //
    //       vermerk bitte stehn lassen!          //
    ////////////////////////////////////////////////
    //    der macher des scriptes distanziert     //
    //       sich von dem inhalt der seite        //
    ////////////////////////////////////////////////
    
    /******************* EIGENSCHAFTEN ************************/
    
    	/**************************************************/
    	/* die bilder sollten alle die gleiche größe haben*/
    	/**************************************************/
    
    	bilder			= new Array("1.jpg","2.jpg","3.jpg");
    
    	/**************************************************/
    
    	rahmenBreite		= 660; 		// die breite des rahmens ist gleich die breite des bildes
    	rahmenHoehe		= 440; 		// die höhe des rahmens ist gleich die höhe des bildes
    	rahmenRand		= 2;
    	rahmenStil		= "solid";
    	rahmenFarbe		= "ffffff";
    	rahmenHintergrundFarbe	= "ffffff";
    
    	schriftArt		= "vivaldi";
    	schriftFarbe		= "000000";
    	schriftGroesse		= 3;
    
    	trennZeichen		= "&nbsp;";		// trennzeichen zwischen den links
    
    	srollVarianten		= 1; 		// 0 = von unten nach oben, 1 = von rechts nach links
    
    /*********************************************************/
    
    	document.write("<center>"
    	+"<div id='rahmen' style='width:"
    	+(rahmenBreite+40)+"; height:"
    	+(rahmenHoehe+40)+"; border:"
    	+rahmenRand+"px "
    	+rahmenStil+" #"
    	+rahmenFarbe+"; background-color:#"
    	+rahmenHintergrundFarbe+";overflow:hidden'>");
    
    	(srollVarianten==0) ?
    	document.write("<div id='jumper' style='position:relative;top:18;left:0'>") :
    	document.write("<div id='jumper' style='position:relative;left:18;top:18'>");
    
    	(srollVarianten==0) ?
    	document.write("<table width="
    	+rahmenBreite+" cellspacing=0 cellpadding=0>") :
    	document.write("<table height="
    	+rahmenHoehe+" cellspacing=0 cellpadding=0>");
    
    for (i=0;i<bilder.length;i++)
    {
    	(srollVarianten==0) ?
    	document.write("<tr><td width="
    	+rahmenBreite+" height="
    	+rahmenHoehe+">") :
    	document.write("<td width="
    	+rahmenBreite+" height="
    	+rahmenHoehe+">");
    
    	(srollVarianten==0) ?
    	document.write("<img src="+bilder[i]+"></td></tr>"
    	+"<tr><td height=25></td></tr>") :
    	document.write("<img src="+bilder[i]+"></td>"
    	+"<td><div style='width:25'></div></td>");
    }
    
    	document.write("</table></div></div><br>");
    	
    	
    	
    	
    
    /***********************NAVIGATON *****************************/
    for (i = 0; i < bilder.length; i++)
    {
    	if (i == bilder.length-1) trennZeichen = "";
    	(srollVarianten==0) ?
    	(i == 0) ? posY = 0 : posY = (rahmenHoehe*i)+(25*i) :
    	(i == 0) ? posY = 0 : posY = (rahmenBreite*i)+(25*i);
    
    	document.write("<a href='javascript:getPos("
    	+posY+")' onfocus='this.blur()' style='text-decoration:none'><font size="
    	+schriftGroesse+" color="
    	+schriftFarbe+" face="
    	+schriftArt+"></font></a>" /*********hier zahlen-index-erzeugung*********/
    	+"<font style='cursor:default'> "
    	+trennZeichen+" </font>");
    }
    
    /***************************************************************/
    
    
    	document.write("</center>");
    
    var thePos=dimx=Dimx=0,time;
    
    function getPos(step)
    {
    
    	var actStep = 0;
    	
    	actStep += step;
        actPos=(srollVarianten == 0) ? (rahmenHoehe*step)+(25*actStep) : (rahmenBreite*step)+(25*actStep);
    
    	thePos 	= actPos-(actPos*2)+18;
    
    	browser	= navigator.appName;
    	usAgent = navigator.userAgent;
    
    	if (browser == "Microsoft Internet Explorer" || usAgent.indexOf("Opera") >- 1) 
    	clearTimeout(time);
    
    	dmx();
    }
    function dmx()
    {
    	time 	= setTimeout("dmx()",0);
    
    	dimx 	= Math.round(Dimx+=((thePos)-Dimx)*4/20);
    
    	if (document.getElementById)
    	{
    		(srollVarianten==0) ?
    		document.getElementById("jumper").style.top  = dimx :
    		document.getElementById("jumper").style.left = dimx;
    	}
    	else if (document.all)
    	{
    		(srollVarianten==0) ?
    		document.all["jumper"].style.top  = dimx :
    		document.all["jumper"].style.left = dimx;
    	}
    
    	if (thePos == dimx) clearTimeout(time);
    }
    </script>

  2. #2
    Avatar von def den
    def den ist offline Doppel-As
    registriert
    30-06-2005
    Ort
    Wolfsburg
    Beiträge
    107

    AW: wechselnder text

    ich habe die einzelnen kommentare zu den bildern nun in einem array abgelegt.
    nur finde ich keine funktion im netz, die per klick das array durchläuft und den text an einer bestimmtes stelle wechselnd darstellt?



    Code:
    <script language=javascript>
    ////////////////////////////////////////////////
    // dmx slidershow by robert engelhardt © 2003 //
    //              womstar@uni.de                //
    //       vermerk bitte stehn lassen!          //
    ////////////////////////////////////////////////
    //    der macher des scriptes distanziert     //
    //       sich von dem inhalt der seite        //
    ////////////////////////////////////////////////
    
    /******************* EIGENSCHAFTEN ************************/
    
    	/**************************************************/
    	/* die bilder sollten alle die gleiche größe haben*/
    	/**************************************************/
    
    	bilder			= new Array("1.jpg","2.jpg","3.jpg","4.jpg","5.jpg","6.jpg","7.jpg","8.jpg","9.jpg","10.jpg");
    	
    /*********************KOMMENTARE ZU JEDEM EINZELNEN BILD*********************************/
    	var Text = new Array;
    Text[1]="Morgens um 8:00 Am Exer";
    Text[2]="Der Exer ist urspr&uuml;nglich eine alte umgebaute Kaserne...";
    Text[3]="...die den gut 800 Informatik-Studenten als Campus dient.";
    Text[4]="Der Exer liegt auf einem Berg rund 1 KM entfernt von der FH inklusive der restlichen Fakult&auml;ten.";
    
    Text[5]="Der gr&ouml;&szlig;te Vorlesungssaal vor dem gro&szlig;nen Ansturm...";
    Text[6]="...Mathe steht auf dem Programm...";
    Text[7]="der Raum 223 bietet Platz f&uuml;r &uuml;ber 100 Studenten...";
    Text[8]="...und Studentinnen;"
    
    Text[9]="Der Exer bietet eine Mischung aus gew&ouml;hnungsbed&uuml;rftigen Grau und Gr&uuml;n...";
    Text[10]="...besonders gr&uuml;n ist er im Herzen des 4-Eck-Baus mit seiner gro&szlig;en Rasenfleche...";
    Text[11]="...perfekt zum relaxen...";
    Text[12]="...zum gem&uuml;tlichem Beieinandersein";
    Text[13]="...und nat&uuml;rlich zum Lernen. In Hintergrund sieht man die FH-Bibliothek...";
    
    Text[14]="...welche praktischerweile auf dem Exer zu finden ist...";
    Text[15]="...die Bibliothek bietet Lekt&uuml;ren f&uuml;r s&auml;mtliche Fachbereiche...";
    Text[16]="...nat&uuml;rlich mit einer Informatik-Ecke...";
    Text[17]="...mit reichlich einschl&auml;giger Literatur...";
    Text[18]="...wenn etwas gefunden wurde, kann man sich die B&uuml;cher per elektronischer Hilfe auf einfache Weise selber ausleihen.";
    Text[19]="Zum Anderen liegt gegen&uuml;ber der Bibliothek auch das BAf&ouml;G-Amt.";
    
    Text[20]="Mittags geht es schnell runter in das Hauptgeb&auml;de der FH...";
    Text[21]="...noch schnell einen Parkplatz gesucht..";
    
    Text[22]="...um sich in der Mensa einzufinden...";
    Text[23]="...und sich in die Schlange einzureihen...";
    Text[24]="...wo man sich ohne eigenen Zeitaufwand f&uuml;r 2-3 € st&auml;rken kann...";
    Text[25]="...und u.a. aus 3 Hauptgerichten nebst Beilagen und Nachtisch w&auml;hlen kann...";
    
    Text[26]="...oder es ist einem nach einem Kaffee plus kleinem Snack in der Cafeteria.";
    Text[27]="Zur Mittagsstunde bietet sich einm in den G&auml;ngen ein wildes Hin und Her...";
    Text[28]="...und es l&auml;ft sich die Halbe Fh &uuml;ber den Weg...";
    
    Text[29]="...so geht man einfach einen Schritt nach draussen...";
    Text[30]="...um eine Verdauungszigarette zu rauchen...";
    Text[31]="...oder relaxt einen Kaffee zu trinken...";
    Text[32]="...und dem wilden Treiben zu entkommen und sich etwas zu erholen...";
    Text[33]=" an der frischen Luft im Gr&uuml;n...";
    Text[34]="...bevor es wieder in die Vorlesung geht.";
    
    
    Text[35]="anfang 2004 ";
    Text[36]="anfang 2004 laagberg wob";
    Text[37]="mitte 2004 nordsee tossens";
    Text[38]="aufen postfahrrad";
    Text[39]="mitte 2004 am hafen";
    Text[40]="2004 nachem r+konzert";
    
    	
    	
    	
    	
    	var actStep = 0;
    	var bildIndex = 1;
    	
    
    
    	/**************************************************/
    
    	rahmenBreite		= 660; 		// die breite des rahmens ist gleich die breite des bildes
    	rahmenHoehe		= 440; 		// die höhe des rahmens ist gleich die höhe des bildes
    	rahmenRand		= 2;
    	rahmenStil		= "solid";
    	rahmenFarbe		= "ffffff";
    	rahmenHintergrundFarbe	= "ffffff";
    
    	schriftArt		= "vivaldi";
    	schriftFarbe		= "000000";
    	schriftGroesse		= 3;
    
    	trennZeichen		= "&nbsp;";		// trennzeichen zwischen den links
    
    	srollVarianten		= 1; 		// 0 = von unten nach oben, 1 = von rechts nach links
    
    /*********************************************************/
    
    
    	document.write("<center>"
    	+"<div id='rahmen' style='width:"
    	+(rahmenBreite+40)+"; height:"
    	+(rahmenHoehe+40)+"; border:"
    	+rahmenRand+"px "
    	+rahmenStil+" #"
    	+rahmenFarbe+"; background-color:#"
    	+rahmenHintergrundFarbe+";overflow:hidden'>");
    
    	(srollVarianten==0) ?
    	document.write("<div id='jumper' style='position:relative;top:18;left:0'>") :
    	document.write("<div id='jumper' style='position:relative;left:18;top:18'>");
    
    	(srollVarianten==0) ?
    	document.write("<table width="
    	+rahmenBreite+" cellspacing=0 cellpadding=0>") :
    	document.write("<table height="
    	+rahmenHoehe+" cellspacing=0 cellpadding=0>");
    
    for (i=0;i<bilder.length;i++)
    {
    
    	(srollVarianten==0) ?
    	document.write("<tr><td width="
    	+rahmenBreite+" height="
    	+rahmenHoehe+">") :
    	document.write("<td width="
    	+rahmenBreite+" height="
    	+rahmenHoehe+">");
    
    	(srollVarianten==0) ?
    	document.write("<img src="+bilder[i]+"></td></tr>"
    	+"<tr><td height=25></td></tr>") :
    	document.write("<img src="+bilder[i]+"></td>"
    	+"<td><div style='width:25'></div></td>");
    }
    
    	document.write("</table></div></div>");
    
    	document.write(bildIndex +" / " + i); /******NUMMER DES AKTUELLEN BILDES +++ GESAMTANZAHL *******/
    
    	document.write("</center>");
    
    var thePos=dimx=Dimx=0,time;
    
    function getPos(step)
    {
    
        actStep += step;
    	
    	bildIndex += step;
    	
    	
        actPos=(srollVarianten == 0) ? (rahmenHoehe*actStep)+(25*actStep) : (rahmenBreite*actStep)+(25*actStep);
    
    	thePos 	= actPos-(actPos*2)+18;
    
    	browser	= navigator.appName;
    	usAgent = navigator.userAgent;
    
    	if (browser == "Microsoft Internet Explorer" || usAgent.indexOf("Opera") >- 1) 
    	clearTimeout(time);
    
    	dmx();
    	
    }
    function dmx()
    {
    	time 	= setTimeout("dmx()",0);
    	dimx 	= Math.round(Dimx+=((thePos)-Dimx)*4/20);
    
    	if (document.getElementById)
    	{
    		(srollVarianten==0) ?
    		document.getElementById("jumper").style.top  = dimx :
    		document.getElementById("jumper").style.left = dimx;
    	}
    	else if (document.all)
    	{
    		(srollVarianten==0) ?
    		document.all["jumper"].style.top  = dimx :
    		document.all["jumper"].style.left = dimx;
    	}
    
    	if (thePos == dimx) clearTimeout(time);
    }
    </script>

    zum anderen möchte ich eine anzeige, wieviele bilder insgesamt vorhanden sind (was mir schon gelungen ist) + anzeige des index des aktuellen bildes. was aber nicht gelingen will, da die globale varialbe bildIndex beim document.write den neuen wert nicht herausgeben will?!

  3. #3
    daWonderer ist offline Routinier
    registriert
    21-04-2007
    Beiträge
    409

    AW: wechselnder text

    Zitat Zitat von def den Beitrag anzeigen
    nur finde ich keine funktion im netz, die per klick das array durchläuft und den text an einer bestimmtes stelle wechselnd darstellt?
    Für solche speziellen Aufgaben muss man dann schon selbst Hand anlegen.
    Du benötigst dafür ein HTML-Element mit einer ID oder einem Namen.
    Auf dieses greifst du mit getElementById bzw. getElementsByName zu.
    Dann kannst du mit weiteren Methoden den Inhalt zuweisen/ändern.

    SELFHTML: JavaScript / Objektreferenz / node

    Auch "innerHTML" könnte dir das weiterhelfen.

    Zitat Zitat von def den Beitrag anzeigen
    was aber nicht gelingen will, da die globale varialbe bildIndex beim document.write den neuen wert nicht herausgeben will?!
    Bitte versuche erst einmal zu verstehen was das Skript eig.macht (die Reihenfolge). Das ist die Grundlage dafür wenn man Änderungen daran vornehmen will.
    Wenn du das Skript Schritt für Schritt durchgehst, wirst du feststellen, dass diese document.write(...) Anweisung nur ein einziges Mal aufgerufen wird.
    Geändert von daWonderer (20-05-2007 um 18:11 Uhr) Grund: ausbesserung...
    greetz, Ralf...

  4. #4
    Avatar von anna55
    anna55 ist offline Moderator
    registriert
    06-02-2006
    Ort
    Taunusstein
    Beiträge
    3.430

    AW: wechselnder text

    Zitat Zitat von daWonderer Beitrag anzeigen
    ...Auf dieses greifst du mit getElementById bzw. getElmentByName zu...
    IMHO getElementsByName


    .:Taunusstein - Nachrichten und Kommentare


    "Ich bin doch lieber jeden Tag glücklich als im Recht."
    (Per Anhalter durch die Galaxis)

  5. #5
    daWonderer ist offline Routinier
    registriert
    21-04-2007
    Beiträge
    409

    AW: wechselnder text

    @anna55 upps, danke...

    @def_den
    ... die per klick das array durchläuft und den text an einer bestimmtes stelle wechselnd darstellt?
    Für den Wechsel kann man "setTimeout" oder auch "setInterval" verwenden.
    (beides in Selfhtml zu finden)
    greetz, Ralf...

  6. #6
    Avatar von def den
    def den ist offline Doppel-As
    registriert
    30-06-2005
    Ort
    Wolfsburg
    Beiträge
    107

    AW: wechselnder text

    Zitat Zitat von daWonderer Beitrag anzeigen


    Bitte versuche erst einmal zu verstehen was das Skript eig.macht (die Reihenfolge). Das ist die Grundlage dafür wenn man Änderungen daran vornehmen will.
    Wenn du das Skript Schritt für Schritt durchgehst, wirst du feststellen, dass diese document.write(...) Anweisung nur ein einziges Mal aufgerufen wird.

    hi ja das hatte ich schon bemerkt, ich wollte deshalb das document.write() deshalb in der methode getPos() integrieren, da diese durch jeden klick ja refresht wird. oder die document.write()-index erzeugung in eine eigene methode stecken, die durchs klicken aufrufe. nur passt es dann nicht mehr mit der darstellung. da die ausgabe der gesamtbilderanzahl (i)(bei der ja ein aufruf reicht) + besagtes oben (bildindex) an verschiedener stelle ausgegeben werden, soweit mein wissen reicht.

    Code:
    document.write(bildIndex +" / " + i); /******NUMMER DES AKTUELLEN BILDES +++ GESAMTANZAHL *******/
    kurzum ich habe das skript in etwa grob verstanden, aber die bevorstehenden prüfungen ermöglichen mir z.zt. kein tiefergehen. aber in den ferien werde ich mich näher mit js auseinandersetzen und nicht mehr so häufig nach hilfe fragen, bzw. wenn dann bei weniger trivialen problemstellungen.

  7. #7
    daWonderer ist offline Routinier
    registriert
    21-04-2007
    Beiträge
    409

    AW: wechselnder text

    Du kannst ruhig fragen!

    Der Ansatz mit getPos() ist schon mal richtig.
    document.write(..) schreibt aber in das Dokument, hängt also Text an das Dokument an.
    Du möchtest aber nicht etwas hineinschreiben, sondern etwas schon drin stehendes ändern. Dafür habe ich dir einige Möglichkeiten genannt z.b. mit getElement... und nodes bzw. innerHTML.
    Geändert von daWonderer (20-05-2007 um 19:16 Uhr)
    greetz, Ralf...

  8. #8
    Avatar von def den
    def den ist offline Doppel-As
    registriert
    30-06-2005
    Ort
    Wolfsburg
    Beiträge
    107

    AW: wechselnder text

    tjoa es hilft nix, wir saßen heute geschlagene 4 stunden zu zweit dran und sind irgendwie zu dusselig.

    3 probleme sind noch vorhanden:
    -die anzeige der indizies des jeweiligen aktuellen bildes
    -verhindern vom scrollen am anfang und ende ins leere...was aber so halb in arbeit ist, aber noch nicht ganz läuft.

    -und das große problem, die texte aus dem array heraus zum jeweiligen bild auszugeben. wir haben zwar rumprobiert, sind aber auf keinen nennenswerten erfolg gestoßen.
    hilfe...!

  9. #9
    Avatar von def den
    def den ist offline Doppel-As
    registriert
    30-06-2005
    Ort
    Wolfsburg
    Beiträge
    107

    AW: wechselnder text

    ich hab's!!!
    mir kam gestern nach die goldene idee, mit der ich um die oben empfohlene lösung drum herum kam. ich habe die array-kommentare einfach in der schleife, in der die palette an bildern erzeigt wird, dran gehängt:

    Code:
    for (i=0;i<bilder.length;i++)
    {
    
    	(srollVarianten==0) ?//vertikal scrollen?
    	document.write("<tr><td width="
    	+rahmenBreite+" height="
    	+rahmenHoehe+">") :
    	document.write("<td width="
    	+rahmenBreite+" height="
    	+rahmenHoehe+">");
    
    	(srollVarianten==0) ?//vertikal scrollen?
    	document.write("<img src="+bilder[i]+"><br>"
    	+"<font face=" + schriftArt+">"+Text[i+1]+"</font></td>"
    	+"</tr><tr><td height=25></td></tr>") :
        document.write("<img src="+bilder[i]+"><br>"
    	+"<font face=" + schriftArt+">"+Text[i+1]+"</font></td>"
    	+"<td><div style='width:25'></div></td>");
    }

Ähnliche Themen

  1. Navigation in eigener datei ablegen...
    Von midnight im Forum Allgemeines
    Antworten: 25
    Letzter Beitrag: 21-03-2009, 11:16
  2. DIV mittels JS immer an Browser-Top ausrichten ?!
    Von flashfreak im Forum JavaScript
    Antworten: 9
    Letzter Beitrag: 11-04-2007, 09:05
  3. Iframe mit anker - hauptseite lädt iframe anker
    Von Odo im Forum CSS und (X)HTML
    Antworten: 1
    Letzter Beitrag: 15-03-2007, 16:12
  4. NUR "Druckbereich" festlegen
    Von Speedy19102000 im Forum JavaScript
    Antworten: 2
    Letzter Beitrag: 29-09-2006, 15:32
  5. Objekt an "unbekannter" Position erstellen
    Von RoyalKnight im Forum JavaScript
    Antworten: 14
    Letzter Beitrag: 23-12-2005, 00:51

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •