# Vor und zurück Button



## helmlein (18. Apr 2007)

Hallo,


```
<html>
<head>
<title>UA'00 - Augsburg vs. BSG Wismut Aue</title>
</head>
<body bgcolor="#272727" link="#000000" alink="#000000" vlink="#000000">
<center>[img]ueberschrift.jpg[/img]</center>
<script language=javascript>
////////////////////////////////////////////////
// dmx slidershow by robert engelhardt © 2003 //
//              [email]womstar@uni.de[/email]                //
//       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("fcaaue1.JPG","fcaaue2.JPG","fcaaue3.JPG","fcaaue4.JPG","fcaaue5.JPG","fcaaue6.JPG","fcaaue7.JPG","fcaaue8.JPG","fcaaue9.JPG","fcaaue10.JPG","fcaaue11.JPG","fcaaue12.JPG","fcaaue13.JPG","fcaaue14.JPG","fcaaue15.JPG","fcaaue16.JPG","fcaaue17.JPG","fcaaue18.JPG","fcaaue20.JPG","fcaaue21.JPG","fcaaue22.JPG","fcaaue23.JPG","fcaaue24.JPG","fcaaue25.JPG");

	/**************************************************/

	rahmenBreite		= 640; 		// die breite des rahmens ist gleich die breite des bildes
	rahmenHoehe		= 480; 		// die höhe des rahmens ist gleich die höhe des bildes
	rahmenRand		= 1;
	rahmenStil		= "solid";
	rahmenFarbe		= "000000";
	rahmenHintergrundFarbe	= "999999";

	schriftArt		= "verdana";
	schriftFarbe		= "999999";
	schriftGroesse		= 1;

	trennZeichen		= "-";		// 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]+bilder[i]+[/img]</td></tr>"
	+"<tr><td height=25></td></tr>") :
	document.write("[img]+bilder[i]+[/img]</td>"
	+"<td><div style='width:25'></div></td>");
}

	document.write("</table></div></div>
");

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+">"+(i+1)+"</font></a>"
	+"<font style='cursor:default'> "
	+trennZeichen+" </font>");
}

	document.write("</center>");

var thePos=dimx=Dimx=0,time;

function getPos(pos)
{
	thePos 	= pos-(pos*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>

<center>Dank geht an uns</center>
</body>
</html>
```

Das ist mein Quelltext für eine Galerie. Ich möchte anstatt der Zahlen einen grafischen Vor und Zurückbutton. Könnt ihr mir bitte helfen, das zu realisieren??

MfG

Helmein


----------



## Wildcard (18. Apr 2007)

Java ist nicht Javascript.
*verschieb*


----------



## Ariol (18. Apr 2007)

du musst die getPos(pos)-methode abändern.

Du musst dir nur aus der aktuellen Position berechnen, wie die nächste bzw. die vorige lautet und dann den entsprechenden Aufruf auf den Vor/Zurück-Link setzen


----------



## helmlein (18. Apr 2007)

Danke @Wildcard

@ariol
Kannst du mir da helfen? Ich hab von Java-Scripten so viel Ahnung, wie Männer vom bügeln 

MfG

hölm

P.S. @Wildcard
Kannst du meinen ersten Post bitte editieren und den 
	
	
	
	





```
- Code schließen?
```


----------



## Wildcard (18. Apr 2007)

done


----------



## Ariol (18. Apr 2007)

ich sehs mir morgen mal an, jetzt bin ich zu müde


----------



## helmlein (18. Apr 2007)

Das ist doch mal ein Wort. 

Danke schon mal im vorraus


----------



## Ariol (19. Apr 2007)

Hatte ja keine passenden Bilder zum Testen, aber das hier sollte klappen - probiers mal... vielleicht musst du noch an der zu scrollenden Weite arbeiten!?


```
<html>
<head>
<title>UA'00 - Augsburg vs. BSG Wismut Aue</title>
</head>
<body bgcolor="#272727" link="#000000" alink="#000000" vlink="#000000">
<center>[img]ueberschrift.jpg[/img]</center>
<script language=javascript>
////////////////////////////////////////////////
// dmx slidershow by robert engelhardt © 2003 //
// [email]womstar@uni.de[/email] //
// 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("firefox.png","firefox2.png","firefox3.png","firefox4.png","firefox5.png","firefox6.png","firefox7.png","firefox8.png");

/**************************************************/

rahmenBreite = 640; // die breite des rahmens ist gleich die breite des bildes
rahmenHoehe = 480; // die höhe des rahmens ist gleich die höhe des bildes
rahmenRand = 1;
rahmenStil = "solid";
rahmenFarbe = "000000";
rahmenHintergrundFarbe = "999999";

schriftArt = "verdana";
schriftFarbe = "999999";
schriftGroesse = 1;

trennZeichen = "-"; // 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]+bilder[i]+[/img]</td></tr>"
+"<tr><td height=25></td></tr>") :
document.write("[img]+bilder[i]+[/img]</td>"
+"<td><div style='width:25'></div></td>");
}

document.write("</table></div></div>
");

for (i = 0; i < bilder.length; i++)
{
if (i == bilder.length-1) trennZeichen = "";
(srollVarianten==0) ?
(i == 0) ? posY = 0 : posY = i :
(i == 0) ? posY = 0 : posY = i;

}

document.write("<a href='javascript:getPos("+-1+")' onfocus='this.blur()' style='text-decoration:none'><font size="
+schriftGroesse+" color="
+schriftFarbe+" face="
+schriftArt+">Back</font></a>"
+"<font style='cursor:default'> "
+trennZeichen+" </font>");
document.write("<a href='javascript:getPos("+1+")' onfocus='this.blur()' style='text-decoration:none'><font size="
+schriftGroesse+" color="
+schriftFarbe+" face="
+schriftArt+">Forward</font></a>"
+"<font style='cursor:default'> "
+trennZeichen+" </font>");

document.write("</center>");

var thePos=dimx=Dimx=0,time;

function getPos(pos)
{
	if(pos==-1)thePos = thePos+rahmenBreite;
	else if(pos==1)thePos = thePos-rahmenBreite;

	if(thePos >= bilder.length*rahmenBreite)thePos = 0;
	else if(thePos < 0)thePos = bilder.length-1;
	
	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>

<center>Dank geht an uns</center>
</body>
</html>
```


----------



## helmlein (19. Apr 2007)

Ne funktioniert irgendwie nicht.

Ich kann dir aber mal die Bilder geben 

Oder ich bin wie gesagt zu blöd  

www.first-world.de/dateien/a.rar


----------



## Ariol (19. Apr 2007)

Habs, war garnichtmal so schwer 


```
<html>
<head>
<title>UA'00 - Augsburg vs. BSG Wismut Aue</title>
</head>
<body bgcolor="#272727" link="#000000" alink="#000000" vlink="#000000">
<center>[img]ueberschrift.jpg[/img]</center>
<script language=javascript>
////////////////////////////////////////////////
// dmx slidershow by robert engelhardt © 2003 //
//              [email]womstar@uni.de[/email]                //
//       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("fcaaue1.JPG","fcaaue2.JPG","fcaaue3.JPG","fcaaue4.JPG","fcaaue5.JPG","fcaaue6.JPG","fcaaue7.JPG","fcaaue8.JPG","fcaaue9.JPG","fcaaue10.JPG","fcaaue11.JPG","fcaaue12.JPG","fcaaue13.JPG","fcaaue14.JPG","fcaaue15.JPG","fcaaue16.JPG","fcaaue17.JPG","fcaaue18.JPG","fcaaue20.JPG","fcaaue21.JPG","fcaaue22.JPG","fcaaue23.JPG","fcaaue24.JPG","fcaaue25.JPG");

   /**************************************************/

   rahmenBreite      = 640;       // die breite des rahmens ist gleich die breite des bildes
   rahmenHoehe      = 480;       // die höhe des rahmens ist gleich die höhe des bildes
   rahmenRand      = 1;
   rahmenStil      = "solid";
   rahmenFarbe      = "000000";
   rahmenHintergrundFarbe   = "999999";

   schriftArt      = "verdana";
   schriftFarbe      = "999999";
   schriftGroesse      = 1;

   trennZeichen      = "-";      // trennzeichen zwischen den links

   srollVarianten      = 1;       // 0 = von unten nach oben, 1 = von rechts nach links

   position = 0;
/*********************************************************/

   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]+bilder[i]+[/img]</td></tr>"
   +"<tr><td height=25></td></tr>") :
   document.write("[img]+bilder[i]+[/img]</td>"
   +"<td><div style='width:25'></div></td>");
}

   document.write("</table></div></div>
");

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("+-1+")' onfocus='this.blur()' style='text-decoration:none'><font size="
   +schriftGroesse+" color="
   +schriftFarbe+" face="
   +schriftArt+">Back</font></a>"
   +"<font style='cursor:default'> "
   +trennZeichen+" </font>");


   document.write("<a href='javascript:getPos("+1+")' onfocus='this.blur()' style='text-decoration:none'><font size="
   +schriftGroesse+" color="
   +schriftFarbe+" face="
   +schriftArt+">Forward</font></a>"
   +"<font style='cursor:default'> "
   +trennZeichen+" </font>");

   document.write("</center>");

var thePos=dimx=Dimx=0,time;

function getPos(pos)
{  

   position = position + pos;

   if(position == bilder.length) position = 0;
   else if(position == -1) position = bilder.length-1;
	
   (srollVarianten==0) ?
   (i == 0) ? posY = 0 : posY = (rahmenHoehe+25)*position :
   (i == 0) ? posY = 0 : posY = (rahmenBreite+25)*position;
   pos=pos*(rahmenHoehe+25)+pos;

   thePos    = posY-(posY*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>

<center>Dank geht an uns</center>
</body>
</html>
```


Ich muss aber noch gestehen, dass das meine erste Arbeit mit JavaScript war, aber ist ja Java sehr ähnlich  :lol:


----------



## helmlein (19. Apr 2007)

DANKE DANKE DANKE.

Ganz großes Lob an dich  

MfG

helmlein


----------



## Ariol (19. Apr 2007)

Kein Problem. 

Ach ja, wenn du statt 1 oder -1 (bei den Links) anderen Zahlen verwendest geht das soweit auch, nur an den Enden springt er dann wieder auf erste oder das letzte Bild

also, wenn du 2 einsetzt springt er beim klick auf den Link jeweils 2 vorwärts.

Das mit den Enden kannst du aber auch ausnutzen um direkt an den Anfang oder ans Ende zu springen.

bei -(bilder.length+1) springst du aufs letzte Bild
mit +bilder.length springst du aufs erste


----------



## helmlein (22. Apr 2007)

Noch eine Bitte   

Kannst du zwischen vor und zurück eine Art Zähler rein machen? z.B. 5 von 12 oder so??


----------



## Ariol (23. Apr 2007)

Sorry, so viel Ahnung hab ich nicht....

Das Problem ist, das ich dabei eine Zahl ändern müsste, und wie das funktioniert weiss ich leider nicht.


----------

