Slideshow / Bilderwechsel |
Ponyhof

Mir gehen die Nickänderungen auf den S*ck
 

Dabei seit: 19.02.2005
Beiträge: 5.951
 |
|
Slideshow / Bilderwechsel |
 |
Ja, ich wurde genervt xp
Ich hoffe es wissen alle, was damit gemeint ist. Wenn man unten auf Bild 1, Bild 2, Bild 3 ... klickt kommen die Bilder.
Der Tutorial funktioniert bei allen HTML Anbietern. ( Piranho, Funpic, Ohost, Arcor ... ) Bei den Baukästen weiß ich es nicht.
Achtung: Nur eine Slideshow pro Seite
Step 1:
Ihr müsst alle Bilder raufladen die ihr braucht bzw haben wollt. Alle Bilder müssen die gleiche Größe haben. Als nächstes öffnet ihr den Windows Editor. [ Start > Alle Programme > Zubehör > Editor ]
Step 2:
Ihr fügt im Editor erstmal den ganzen Code hier ein:
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:
|
<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://ponyhofsarchiv.po.ohost.de/Pferde/pfe_001.jpg","http://ponyhofsarchiv.po.ohost.de/Pferde/pfe_002.jpg","http://ponyhofsarchiv.po.ohost.de/Pferde/pfe_003.jpg","http://ponyhofsarchiv.po.ohost.de/Katzen/kat_001.jpg");
/**************************************************/
rahmenBreite = 460; // die breite des rahmens ist gleich die breite des bildes
rahmenHoehe = 352; // die höhe des rahmens ist gleich die höhe des bildes
rahmenRand = 1;
rahmenStil = "dashed";
rahmenFarbe = "#908699";
rahmenHintergrundFarbe = "hg.png";
schriftArt = "verdana";
schriftFarbe = "908699";
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+40)+"; height:"
+(rahmenHoehe+40)+"; border:"
+rahmenRand+"px "
+rahmenStil+" #"
+rahmenFarbe+"; background-color:#8e927c"
+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='javascript: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)*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> |
|
Step 3:
Ab hier müsst ihr meinen Code verändern:
code: |
1:
2:
3:
4:
5:
|
/**************************************************/
bilder = new Array("http://ponyhofsarchiv.po.ohost.de/Pferde/pfe_001.jpg","http://ponyhofsarchiv.po.ohost.de/Pferde/pfe_002.jpg","http://ponyhofsarchiv.po.ohost.de/Pferde/pfe_003.jpg","http://ponyhofsarchiv.po.ohost.de/Katzen/kat_001.jpg");
/**************************************************/
|
|
new lasst ihr da stehen und bei Array fügt ihr die Bilder ein. Jedes Bild kommt in " und wird ohne Leerzeichen mit einem Komma(,) getrennt.
Step 4:
Nun stellt ihr die Größe der Bilder ein, die Hinweise könnt ihr stehen lassen. Die Breite in px (Pixel) angeben aber keine Einheit dazu.
code: |
1:
2:
3:
|
rahmenBreite = 460; // die breite des rahmens ist gleich die breite des bildes
rahmenHoehe = 352; // die höhe des rahmens ist gleich die höhe des bildes |
|
Step 5:
Nun müsst ihr die 'Tabelle' einstellen. der RahmenRand ist die Breite des Rahmens, wie bei Step 4 in px. Dann der Stil müsst ihr euch ebend einstellen. dashed ist ebend meiner. Die Rahmenfarbe und der Hintergrund. Entweder als Bild oder ebenfalls als Farbe.
code: |
1:
2:
3:
4:
|
rahmenRand = 1;
rahmenStil = "dashed";
rahmenFarbe = "#908699";
rahmenHintergrundFarbe = "hg.png"; |
|
Step 6:
Einstellung der Schrift vom Bild 1, Bild 2, Bild 3 ... Wie das geht ist klar, steht ja alles vor. Die Schriftgröße ist nicht in px, sondern Schrifteinheit im HTML. 2 ist die häufigst genutzte.
code: |
1:
2:
3:
4:
|
schriftArt = "verdana";
schriftFarbe = "908699";
schriftGroesse = 2;
|
|
Step 7:
Als Trennzeichen zwischen den Links müsst ihr euch ein Zeichen aussuchen, in diesem Fall habe ich den Bindestrich genommen. Das Zeichen muss in die beiden Anführungszeichen.
code: |
1:
|
trennZeichen = "-"; // trennzeichen zwischen den links |
|
Step 8:
Nun noch entscheiden ob es von rechts nach links oder von unten nach oben gehen soll. Für rechts nach links die 1 und von unten nach oben die 0. Das ; muss hinter der Zahl stehen bleiben.
code: |
1:
|
srollVarianten = 1; // 0 = von unten nach oben, 1 = von rechts nach links |
|
Step 9:
Den Code komplett kopieren und im Quelltext/HTMLtext einfügen wo er hinsoll. Bei einer Tabelle zwischen <td></td>
Bei Fragen bitte hier antworten.
MfG;
Ponyhof
__________________
|
|
17.08.2007 14:22 |
|
|
xXJanineXx

Supernatural <3
 

Dabei seit: 29.04.2007
Beiträge: 2.004
Herkunft: Münster
 |
|
Ja ist ja gut^^ Ich weiß das ich genervt habsch...
Ich hab den Code wahrscheinlich voll falsch *g*, auf jedem Fall klappt er ned...
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:
|
<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://www.oyla13.de/userdaten/09147771/bilder/Alice.jpg,http://www.oyla13.de/userdaten/09147771/bilder/Alice2.jpg");
/**************************************************/
rahmenBreite = 5050; //
rahmenHoehe = 380; //
rahmenRand = 1;
rahmenStil = "dashed";
rahmenFarbe = "#000000";
rahmenHintergrundFarbe = "111111";
schriftArt = "verdana";
schriftFarbe = "000000";
schriftGroesse = 1;
trennZeichen = "-"; //
srollVarianten = 1; //
/*********************************************************/
document.write("<center>"
+"<div id='rahmen' style='width:"
+(rahmenBreite+40)+"; height:"
+(rahmenHoehe+40)+"; border:"
+rahmenRand+"px "
+rahmenStil+" #"
+rahmenFarbe+"; background-color:#8e927c"
+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='javascript: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)*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> |
|
__________________
|
|
17.08.2007 14:41 |
|
|
Ponyhof

Mir gehen die Nickänderungen auf den S*ck
 

Dabei seit: 19.02.2005
Beiträge: 5.951
Themenstarter
 |
|
Zitat: |
Original von xXJanineXx
code: |
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
|
/**************************************************/
bilder = new Array("http://www.oyla13.de/userdaten/09147771/bilder/Alice.jpg,http://www.oyla13.de/userdaten/09147771/bilder/Alice2.jpg");
/**************************************************/
rahmenBreite = 5050; //
rahmenHoehe = 380; //
rahmenRand = 1;
rahmenStil = "dashed";
rahmenFarbe = "#000000";
rahmenHintergrundFarbe = "111111";
schriftArt = "verdana";
schriftFarbe = "000000";
schriftGroesse = 1;
trennZeichen = "-"; //
srollVarianten = 1; // |
|
|
Also erstmal:
code: |
1:
2:
3:
|
Array("http://www.oyla13.de/userdaten/09147771/bilder/Alice.jpg","http://www.oyla13.de/userdaten/09147771/bilder/Alice2.jpg");
|
|
Deine Bildbreiten ist 5.050 px? Das ist ca 4 1/2 so breit wie dein Bildschirm ^^( bei einer Auflösung von 1024x768 px ). Ansonsten, wie gesagt, weiß ich nicht ob der Code bei Oyla, 1page oder anderen Baukästen funktioniert.
MfG;
Ponyhof
__________________
|
|
17.08.2007 14:48 |
|
|
xXJanineXx

Supernatural <3
 

Dabei seit: 29.04.2007
Beiträge: 2.004
Herkunft: Münster
 |
|
OHHHHH
Ja gut ein Problem gelöst, aber der zeigt die Bilder ned an
__________________
|
|
17.08.2007 17:37 |
|
|
Ponyhof

Mir gehen die Nickänderungen auf den S*ck
 

Dabei seit: 19.02.2005
Beiträge: 5.951
Themenstarter
 |
|
Du musst ja auch zwei Bilder angeben. Jedes Bild muss in " ansonsten liest der das als ein Bild (=
MfG;
Ponyhof
__________________
|
|
17.08.2007 18:44 |
|
|
Drea

best of you
 

Dabei seit: 30.12.2005
Beiträge: 960
Herkunft: RLP Name: Andrea
 |
|
Ich hätt mal ne frage..und zwar, welche art von Rahmen gibt es denn noch? Ich kenn mich da noch nicht so aus^^
__________________
|
|
17.08.2007 20:51 |
|
|
Ponyhof

Mir gehen die Nickänderungen auf den S*ck
 

Dabei seit: 19.02.2005
Beiträge: 5.951
Themenstarter
 |
|
gestrichelt: dashed
durchgezogen: solid
Die anderen Namen habe ich gerade nicht im Kopf, werde aber mal nachschauen sobald ich die Datei finde.
MfG;
Ponyhof
__________________
|
|
18.08.2007 11:26 |
|
|
Drea

best of you
 

Dabei seit: 30.12.2005
Beiträge: 960
Herkunft: RLP Name: Andrea
 |
|
Danke Sehr!
__________________
|
|
18.08.2007 17:14 |
|
|
xXJanineXx

Supernatural <3
 

Dabei seit: 29.04.2007
Beiträge: 2.004
Herkunft: Münster
 |
|
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:
|
<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://www.oyla13.de/userdaten/09147771/bilder/Hannoveraner_Adriano_Portrait5.JPG","http://www.oyla13.de/userdaten/09147771/bilder/Hannoveraner_Adriano_Reiten_0.JPG","http://www.oyla13.de/userdaten/09147771/bilder/Hannoveraner_Adriano_Reiten_14.JPG";"http://www.oyla13.de/userdaten/09147771/bilder/Hannoveraner_Adriano_Reiten_2.JPG","http://www.oyla13.de/userdaten/09147771/bilder/Hannoveraner_Adriano_Reiten_26.JPG","http://www.oyla13.de/userdaten/09147771/bilder/Hannoveraner_Adriano_Reiten_33.JPG","http://www.oyla13.de/userdaten/09147771/bilder/Hannoveraner_Adriano_Reiten_51.JPG";"http://www.oyla13.de/userdaten/09147771/bilder/Hannoveraner_Adriano_Reiten_74.JPG");
/**************************************************/
rahmenBreite = 490; //
rahmenHoehe = 471; //
rahmenRand = 1;
rahmenStil = "dashed";
rahmenFarbe = "#000000";
rahmenHintergrundFarbe = "111111";
schriftArt = "verdana";
schriftFarbe = "000000";
schriftGroesse = 1;
trennZeichen = "-"; //
srollVarianten = 1; //
/*********************************************************/
document.write("<center>"
+"<div id='rahmen' style='width:"
+(rahmenBreite+40)+"; height:"
+(rahmenHoehe+40)+"; border:"
+rahmenRand+"px "
+rahmenStil+" #"
+rahmenFarbe+"; background-color:#8e927c"
+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='javascript: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)*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>
|
|
Was ist falsch?? Der will einfach ned angezeigt werden... Also der Code... Ich verzeifle langsame....
__________________
|
|
19.08.2007 01:26 |
|
|
Hrannar

Mitglied
 

Dabei seit: 27.06.2006
Beiträge: 4.094
Herkunft: BW
 |
|
|
19.08.2007 11:08 |
|
|
xXJanineXx

Supernatural <3
 

Dabei seit: 29.04.2007
Beiträge: 2.004
Herkunft: Münster
 |
|
Des Problem habsch au
__________________
|
|
19.08.2007 12:20 |
|
|
lill

lala x)
 

Dabei seit: 13.02.2005
Beiträge: 1.142
 |
|
Kann man anstatt der Links auch Bilder nehmen?
Wenn ja, was muss ich an dem Code ändern?
Danke schonmal
|
|
19.08.2007 19:15 |
|
|
Ponyhof

Mir gehen die Nickänderungen auf den S*ck
 

Dabei seit: 19.02.2005
Beiträge: 5.951
Themenstarter
 |
|
NVU verändert gerne mal die Angaben die man macht, dann funktioniert das Tutorial nicht, daher Editor und in eine Tabelle hinein. Ich gucke gleich nochmal genauer rüber:
²lill: Ja, aber nicht mit diesem Tutorial.
MfG;
Ponyhof
__________________
|
|
19.08.2007 19:34 |
|
|
Ponyhof

Mir gehen die Nickänderungen auf den S*ck
 

Dabei seit: 19.02.2005
Beiträge: 5.951
Themenstarter
 |
|
Dann zeig mal deinen Code her (=
MfG;
Ponyhof
__________________
|
|
22.08.2007 19:36 |
|
|
|
|
 |
Impressum
|