Vor und zurück Button

helmlein · 18. Apr 2007

Hallo,

Code:

<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:

 - Code schließen?

Wildcard · 18. Apr 2007

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!?

Code:

<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

Code:

<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.

	Titel	Forum	Antworten	Datum
H	Funktion aufrufen ohne Button	Angular, React, JQuery - Fragen zu JavaScript	14	23. Mrz 2024
S	Adobe Button "Speichern unter" mit Feldvariablen und Pfad	Angular, React, JQuery - Fragen zu JavaScript	2	18. Sep 2021
P	Zufallsbilder aus Array mithilfe Button neu anzeigen lassen	Angular, React, JQuery - Fragen zu JavaScript	2	13. Jul 2021
B	JavaScript Button hinzufügen	Angular, React, JQuery - Fragen zu JavaScript	2	27. Apr 2021
L	Textfarbe per button ändern	Angular, React, JQuery - Fragen zu JavaScript	6	26. Nov 2020
B	Quiz Fragen in einem Array nach drücken auf einen Button abfragen	Angular, React, JQuery - Fragen zu JavaScript	5	27. Okt 2020
E	Button disable (Uhrzeit)	Angular, React, JQuery - Fragen zu JavaScript	1	26. Jun 2020
K	Liste mit button onclick verknüpfen	Angular, React, JQuery - Fragen zu JavaScript	3	2. Jan 2020
N	Formularinhalt in Tabelle durch Button hinzufügen	Angular, React, JQuery - Fragen zu JavaScript	4	25. Nov 2019
T	Ich möchte einen Button mit JavaScript ausblenden	Angular, React, JQuery - Fragen zu JavaScript	5	24. Mai 2019
J	Html Button mit JavaScript ausführen	Angular, React, JQuery - Fragen zu JavaScript	5	24. Jul 2018
T	aktivieren und deaktivieren von radio button	Angular, React, JQuery - Fragen zu JavaScript	2	23. Jan 2014
G	Button soll ohne php aktuelle Zeit holen	Angular, React, JQuery - Fragen zu JavaScript	2	15. Jan 2013
F	Hilfe Button mit Javascript	Angular, React, JQuery - Fragen zu JavaScript	2	2. Feb 2012
A	Neues Fenster aus iframe öffnen mit Klick auf Button	Angular, React, JQuery - Fragen zu JavaScript	6	29. Dez 2010
D	Button - Strg+F	Angular, React, JQuery - Fragen zu JavaScript	16	14. Aug 2008
B	Button grafisch darstellen	Angular, React, JQuery - Fragen zu JavaScript	6	9. Jul 2007
D	Button, der nach n Klicks Popup öffnet	Angular, React, JQuery - Fragen zu JavaScript	3	21. Mai 2006
A	java chat button bauen?	Angular, React, JQuery - Fragen zu JavaScript	7	26. Apr 2006
L	Automatische Button	Angular, React, JQuery - Fragen zu JavaScript	4	24. Jan 2006
N	1 Button 2 Links	Angular, React, JQuery - Fragen zu JavaScript	5	24. Mrz 2005
V	bbcodes per button	Angular, React, JQuery - Fragen zu JavaScript	5	6. Jan 2004

Vor und zurück Button

helmlein

Gast

Wildcard

Top Contributor

Ariol

Top Contributor

helmlein

Gast

Wildcard

Top Contributor

Ariol

Top Contributor

helmlein

Gast

Ariol

Top Contributor

helmlein

Gast

Ariol

Top Contributor

helmlein

Gast

Ariol

Top Contributor

helmlein

Gast

Ariol

Top Contributor

Ähnliche Java Themen

Aktuelle Jobs

Neue Themen