Vor und zurück Button

Status
Nicht offen für weitere Antworten.
H

helmlein

Gast
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
 

Ariol

Top Contributor
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
 
H

helmlein

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

Ariol

Top Contributor
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>
 

Ariol

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

Ariol

Top Contributor
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
 
H

helmlein

Gast
Noch eine Bitte :oops:

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

Ariol

Top Contributor
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.
 
Status
Nicht offen für weitere Antworten.
Ähnliche Java Themen
  Titel Forum Antworten Datum
H Funktion aufrufen ohne Button Angular, React, JQuery - Fragen zu JavaScript 14
S Adobe Button "Speichern unter" mit Feldvariablen und Pfad Angular, React, JQuery - Fragen zu JavaScript 2
P Zufallsbilder aus Array mithilfe Button neu anzeigen lassen Angular, React, JQuery - Fragen zu JavaScript 2
B JavaScript Button hinzufügen Angular, React, JQuery - Fragen zu JavaScript 2
L Textfarbe per button ändern Angular, React, JQuery - Fragen zu JavaScript 6
B Quiz Fragen in einem Array nach drücken auf einen Button abfragen Angular, React, JQuery - Fragen zu JavaScript 5
E Button disable (Uhrzeit) Angular, React, JQuery - Fragen zu JavaScript 1
K Liste mit button onclick verknüpfen Angular, React, JQuery - Fragen zu JavaScript 3
N Formularinhalt in Tabelle durch Button hinzufügen Angular, React, JQuery - Fragen zu JavaScript 4
T Ich möchte einen Button mit JavaScript ausblenden Angular, React, JQuery - Fragen zu JavaScript 5
J Html Button mit JavaScript ausführen Angular, React, JQuery - Fragen zu JavaScript 5
T aktivieren und deaktivieren von radio button Angular, React, JQuery - Fragen zu JavaScript 2
G Button soll ohne php aktuelle Zeit holen Angular, React, JQuery - Fragen zu JavaScript 2
F Hilfe Button mit Javascript Angular, React, JQuery - Fragen zu JavaScript 2
A Neues Fenster aus iframe öffnen mit Klick auf Button Angular, React, JQuery - Fragen zu JavaScript 6
D Button - Strg+F Angular, React, JQuery - Fragen zu JavaScript 16
B Button grafisch darstellen Angular, React, JQuery - Fragen zu JavaScript 6
D Button, der nach n Klicks Popup öffnet Angular, React, JQuery - Fragen zu JavaScript 3
A java chat button bauen? Angular, React, JQuery - Fragen zu JavaScript 7
L Automatische Button Angular, React, JQuery - Fragen zu JavaScript 4
N 1 Button 2 Links Angular, React, JQuery - Fragen zu JavaScript 5
V bbcodes per button Angular, React, JQuery - Fragen zu JavaScript 5

Ähnliche Java Themen


Oben