[JS] Bildwechsel: Bild1 Bild2 Bild3 Bild4

*Franzi*
Hey,
ich dacht eigtl, dass es bestimmt einen Thread zu diesem Thema gibt, aber ich hab leider nichts gefunden, deshalb frag ich nochmal.
Wie geht der Code für so einen Bildwechsel. Man hat einen Steckbrief, oben das Foto von dem Pferd. Unter dem Foto stehen die Links (Bild1 Bild2...) Sobald man draufklickt ändert sich das Foto oben.

LG Franzi smile
Tobi28
Die gibt es auch benutzmal die SuchFu und gibt Slideshow ein da müsste eigentlich was kommen
*Franzi*
Ah, okay danke!!
Wusste nicht, dass des Slideshow heißt Augen rollen
Versace
Hier steht man kann 3 Bilder nehmen gehen mehr auch ? ^^
LaVa
huhu, also ich hab das mal ausprobiert, aber das funkt nicht ^^
ich hab das in den bodytag eingefügt, aber bei frontpage z.b. erscheint dann unter vorschau nur die ganzen befehle und keine fotos xD
bei phase5 zeigt der nüschts an.. könnt ihr mir mal helfen großes Grinsen
Bubgirl
Bei Phase5 gehts aber genau so und funktioniert auch.
Ist dein Bilderpfad richtig?
LaVa
oh hab iwie zwei mal gepostet ôo dachte, dass das erste garnich abgeschickt wurde ^^ uppsala ^^

also mittlerweile wird es angezeigt, aber wenn ich aufs nächste bild kliggen will, dann sagt er mir, dass die seite nicht angezeigt werden kann..


<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("http://i102.photobucket.com/albums/m99/diesaubande/schweine/SA400085
.jpg","http://i102.photobucket.com/albums/m99/diesaubande/schweine/SA400092
.jpg","http://i102.photobucket.com/albums/m99/diesaubande/schweine/IMG00016
.jpg");

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

rahmenBreite = 645; // die breite des rahmens ist gleich die breite des bildes
rahmenHoehe = 455; // die höhe des rahmens ist gleich die höhe des bildes
rahmenRand = 0;
rahmenStil = "dotted";
rahmenFarbe = "#C0C0C0";
rahmenHintergrundFarbe = "#e1e1e1";

schriftArt = "Comic";
schriftFarbe = "000000";
schriftGroesse = 2;

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+0)+"; height:"
+(rahmenHoehe+0)+"; 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>");

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='java script:getPos("
+posY+")' onfocus='this.blur()' style='text-decoration:none'><font size="
+schriftGroesse+" color="
+schriftFarbe+" face="
+schriftArt+">Bild"+(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)*5/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>
LaVa
kann mir keiner helfen? ^^
skateboard
Kommt bei mir auch,bei den andern Bildern unglücklich
LaVa
jaa voll doof =(

aber anscheinend hat da keiner so nen plan ^^ traurig
skateboard
Hilfe !!^^ pls
INSANITY
Kann jemand vielleicht mal fett makieren, wo was verändert werden muss im code?
.:~*Lianna*~:.
Ich krigs auch nicht so ganz hin großes Grinsen Oder könnte vielleicht jemand ein Tutorial dazu schreiben?
Halla
Also bei mri ist das gleiche Problem. Obwohl meine Bilder gleich groß sind und ich die Größe hier:

rahmenBreite = 645; // die breite des rahmens ist gleich die breite des bildes
rahmenHoehe = 455; // die höhe des rahmens ist gleich die höhe des bildes


Auch eingestellt habe.


Das erste Bild wird beim öffnen angezeigt, wenn ich aber auf eins Klicke, geht es nicht.

Bitte helft uns!!! verwirrt verwirrt verwirrt
Hrannar
bei mir funzt da i-wie net was muss ich denn da im code ersetzten bis au die Bilder URl´s???
Hrannar
bildbreite in Pixel also wenn das Bild 500x600 groß ist 500 eintragen??
und wo genau muss ich das hin machen??
skateboard
Zitat:


<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("bild.jpg","bild1.jpg","bild2.jpg","bild3.jpg");

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

rahmenBreite = 645; // die breite des rahmens ist gleich die breite des bildes
rahmenHoehe = 455; // die höhe des rahmens ist gleich die höhe des bildes

rahmenRand = 0;
rahmenStil = "dotted";
rahmenFarbe = "#C0C0C0";
rahmenHintergrundFarbe = "#e1e1e1";

schriftArt = "Comic";
schriftFarbe = "000000";
schriftGroesse = 2;

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+0)+"; height:"
+(rahmenHoehe+0)+"; 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>");

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='java script:getPos("
+posY+")' onfocus='this.blur()' style='text-decoration:none'><font size="
+schriftGroesse+" color="
+schriftFarbe+" face="
+schriftArt+">Bild"+(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)*5/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>


Da müsste es hin, Breite und Höhe (;
Hrannar
ok danke werds ausprobieren......

edit: ich sehe gar nichts wenn ich es drin habe *lol*
skateboard
Stell mal den Code rein (;
Ayana
code:
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:
129:
130:
 <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("http://unidreams.un.funpic.de/gallerie/hunde/salsa1.jpg","http://unidreams.un.funpic.de/gallerie/hunde/salsa2.jpg","http://unidreams.un.funpic.de/gallerie/hunde/salsa3.jpg","http://unidreams.un.funpic.de/gallerie/hunde/salsa4.jpg");

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

rahmenBreite = 600; // die breite des rahmens ist gleich die breite des bildes
rahmenHoehe = 450; // die höhe des rahmens ist gleich die höhe des bildes
rahmenRand = 0;
rahmenStil = "dotted";
rahmenFarbe = "#000000";
rahmenHintergrundFarbe = "#000000";

schriftArt = "Verdana";
schriftFarbe = "000000";
schriftGroesse = 2;

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+0)+"; height:"
+(rahmenHoehe+0)+"; 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>");

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='java script:getPos("
+posY+")' onfocus='this.blur()' style='text-decoration:none'><font size="
+schriftGroesse+" color="
+schriftFarbe+" face="
+schriftArt+">Bild"+(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)*5/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>
 

Mein Code, es wird das erste Bild beim öffnen der Seite angezeigt, klicke ich aber auf Bild2, etc. kommt die Meldung, die Seite wurde nicht gefunden.