 Java-Script Bilderschau | Neues Problem: 2 verschiedene CSS Codes? |
janinchen
It's me!
Dabei seit: 24.11.2005
Beiträge: 1.043
Herkunft: Baden-Württemberg
 |
|
| Java-Script Bilderschau | Neues Problem: 2 verschiedene CSS Codes? |
     |
Hallo!
Ich habe angefangen, für die Pferde auf meinem VRH die Steckbriefe zu erweitern. Unter anderem hatte ich auch einen "Bilderbucheffekt" im Album geplant.
Soweit alles ok, habs auch eingabaut, usw.
Jetzt starte ich die Application aber die Bilder die ich öffnen will, öffnen sich zwar, aber in der gleichen Größe, wie das Startbild. Hoff ihr versteht, was mein Problem is, hab mal den Code rein und im anhang die Seite, da sie noch nicht hochgeladen ist. Ihr müsst euch halt die Pics vorstellen, da sie wie gesagt noch nicht hochgeladen sind! Dass sie unterschiedlich groß sind, seht ihr ja am schluss der page
Hab schon alles mögliche probiert, alle Größenangaben raus und es auch ohne Tabelle versucht, doch immer das gleiche Ergebnis!
| 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:
|
<html>
<head>
<title>Neue Seite 1</title>
<style type=text/css>
[...]
<script language="JavaScript">
<!--
/*Bilderbuch: Script zum Blättern zwischen verschiedenen Bildern
Copyright: world-of-scripts.net
http://www.world-of-scripts.net*/
var Bild = new Array();
Bild[0] = new Image(); Bild[0].src="Mowgli1.jpg";
Bild[1] = new Image(); Bild[1].src="Mowgli2.jpg";
Bild[2] = new Image(); Bild[2].src="Mowgli3.jpg";
Bild[3] = new Image(); Bild[3].src="Mowgli4.jpg";
nr = 0;
function Blaettern(Richtung)
{
if (Richtung == -1)
{
nr = nr-1;
if (nr == -1)
{
nr = Bild.length-1;
}
}
else
{
nr = nr+1;
if (nr == Bild.length)
{
nr = 0;
}
}
zeigeBilder();
}
function zeigeBilder()
{
document.images.pictures.src=Bild[nr].src;
}
//-->
</script>
</head>
<body>
<table align="center" background="../../../Bilder/Sonstiges/Tabellenhintergrund1.png" border="1">
<tbody>
<tr>
<td background="../../../Bilder/Sonstiges/Tabellenhintergrund2.png">
<div align="center"><img src="Mowgli1.jpg" name="pictures"></div>
<div align="center"><font size="1" face="Verdana">
<a href="javascript:Blaettern(-1)">Zurück</a>
<a href="javascript:Blaettern(1)">Vor</a><br></font>
</div>
</td>
<tr>
<td>
<p align="center"><font face="Verdana" size="1">(c) by <a href="http://www.pferde-fotos.ch/">www.pferde-fotos.ch</a></font></p>
</td>
</tr>
</tbody>
</table>
[...]
</body>
</html> |
|
Schonmal vielen Dank im Vorraus... Bitte helft mir, ich weiß echt nimmer weiter ^^
Janina
PS: Hab noch im Anhang ein Screen, auf dem ihr seht, wie verzogen die Pics dann sind...
__________________
Dieser Beitrag wurde 3 mal editiert, zum letzten Mal von janinchen: 05.06.2006 01:21.
|
|
30.05.2006 16:13 |
|
|
janinchen
It's me!
Dabei seit: 24.11.2005
Beiträge: 1.043
Herkunft: Baden-Württemberg
Themenstarter 
|
|
Also, die Page wo ich das Script herhab, hat auch keine gleichgroßen Pics?! Deswegen??!!
Mich wunderts ja auch... ich kann ja gar nix umstellen...
Hat sonst jemand en anderes Script, auch so ne Bildergalerie, aber die nicht Bild-Größenbedingt ist?
__________________
|
|
|
30.05.2006 16:24 |
|
|
janinchen
It's me!
Dabei seit: 24.11.2005
Beiträge: 1.043
Herkunft: Baden-Württemberg
Themenstarter
|
|
Muss ich das größte bid nehmen??
Also wie gesagt, alle gleich groß, nur Quer- und Hochformat-Pics!
__________________
|
|
|
30.05.2006 16:48 |
|
|
janinchen
It's me!
Dabei seit: 24.11.2005
Beiträge: 1.043
Herkunft: Baden-Württemberg
Themenstarter
|
|
Kein Problem, kannst ja auch nicht alles wissen 
Egal, vllt. kommt jemand anders drauf, oder ich such mal nach nem anderen ähnlichen code
__________________
|
|
|
30.05.2006 17:12 |
|
|
janinchen
It's me!
Dabei seit: 24.11.2005
Beiträge: 1.043
Herkunft: Baden-Württemberg
Themenstarter
|
|
Ich bin auf ein anderes System ausgewichen ^^
Hab ein Script, bei dem ich unterm Bild auch den Link (Bild 1 | Bild 2 | usw.) klicke und dann die Bilder ins Feld "eingefahren" werden 
Hab den Code bei mir auch eingebaut ^^
Klappt soweit alles, nur irgendwie ist alles etwas verschoben da. Obwohl die Bildgröße 500 x 500 ist und ich das auch eingestellt hab, stimmt was nicht. da ist irgendwie noch so ein Rahmen drum... Krieg ich den weg?
Hab mal die Datei angehängt und auch ein Screen gemacht, weil die Page noch nicht online ist und somit die Bilder nicht angezeigt werden
Mich stört es, dass die Bilder nicht genau darein "passen" hab den Code auch schon aus der Tabelle rausgeholt (hätt ja sein können, dass es daran liegt
) aber genau das gleiche Ergebnis. Vllt. kann mir das jemand erklären, was ich ändern muss??!! Wär echt lieb!
Hier noch mein Code:
| 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:
131:
132:
133:
134:
135:
136:
137:
138:
139:
140:
|
[...]
<table align="center" background="../../../Bilder/Sonstiges/Tabellenhintergrund1.png" border="1">
<tbody>
<tr>
<td background="../../../Bilder/Sonstiges/Tabellenhintergrund2.png">
<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("Mowgli1.jpg","Mowgli2.jpg","Mowgli3.jpg","Mowgli4.jpg");
/**************************************************/
rahmenBreite = 500; // die breite des rahmens ist gleich die breite des bildes
rahmenHoehe = 500; // die höhe des rahmens ist gleich die höhe des bildes
rahmenRand = 0;
rahmenStil = "solid";
rahmenFarbe = "#000000";
rahmenHintergrundFarbe = "#FFFFFF";
schriftArt = "Verdana";
schriftFarbe = "000000";
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+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='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>
</td>
<tr>[...] |
|
Achso: Alle Bilder sind übrigens gleich groß (500 x 500 px)
Kann mir jemand helfen?? Find den Fehler auch nach verzweifeltem Suchen nicht ^^
__________________
|
|
|
31.05.2006 14:08 |
|
|
janinchen
It's me!
Dabei seit: 24.11.2005
Beiträge: 1.043
Herkunft: Baden-Württemberg
Themenstarter
|
|
So, hab nochmal was geändert. Hab einfach die Größen verändert, wie du gesagt hast, hätt ich ja auch draufkommen können *kopfschüttel*
Egal, mir is aufgefallen, dass da um die einzelnen Pics so rahmen sind (schwarz) (fällt vor allem beim "blättern" auf) und die waren es, die das ganze so komisch wirken lassen. Vllt. hat da auch noch jemand ne lösung für??
Weiß außerdem jemand, ob/wie ich die Pics in die Mitte krieg? also in die Mitte der Tabelle??
Nochmal mein Code:
| 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:
|
[...]<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("Bonny1.jpg","Bonny2.jpg","Bonny3.jpg");
/**************************************************/
rahmenBreite = 405; // die breite des rahmens ist gleich die breite des bildes
rahmenHoehe = 437; // die höhe des rahmens ist gleich die höhe des bildes
rahmenRand = 0;
rahmenStil = "solid";
rahmenFarbe = "#FFFFFF";
rahmenHintergrundFarbe = "#FFFFFF";
schriftArt = "Verdana";
schriftFarbe = "000000";
schriftGroesse = 1;
trennZeichen = "|"; // trennzeichen zwischen den links
srollVarianten = 0; // 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+"0px"
+rahmenStil+" #"
+rahmenFarbe+"; background-color:#ffffff"
+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>[...] |
|
Und da ich die Seite jetzt endlich mal hochgeladen hab, könnt ihr euchs so anschauen:
www.rv-happyhorses.de.ms
-> Schulpferde -> Bonny / Mowgli
ok??
Bitte!! Brauch eure Hilfe 
__________________
Dieser Beitrag wurde 1 mal editiert, zum letzten Mal von janinchen: 31.05.2006 21:12.
|
|
|
31.05.2006 21:05 |
|
|
janinchen
It's me!
Dabei seit: 24.11.2005
Beiträge: 1.043
Herkunft: Baden-Württemberg
Themenstarter
|
|
Bitte, Leute, kann mir keiner sagen, wie ich diesen Rahmen da wegbekomm?
__________________
|
|
|
03.06.2006 11:13 |
|
|
janinchen
It's me!
Dabei seit: 24.11.2005
Beiträge: 1.043
Herkunft: Baden-Württemberg
Themenstarter
|
|
+hochschieb+
__________________
|
|
|
04.06.2006 12:18 |
|
|
janinchen
It's me!
Dabei seit: 24.11.2005
Beiträge: 1.043
Herkunft: Baden-Württemberg
Themenstarter
|
|
Ok, hab eine Lösung für das Problem gefunden
Da ich einen CSS-Code für meine Tabellen angegeben habe (einfacher rand für "table" und einfacher rand für "td") wurde das auch in das JavaScript übertragen.
Jetzt hab ich mal im CSS den Rand auf 0px gesetzt, und verschwunden war der hässliche Rand in der Bilderschau.
Natürlich waren auch bei den Tabellen die Rahmen weg
Hat einer ne Ahnung, wie/ob ich das "getrennt" machen kann, also bei der Bilderschau kein Rand aber bei den Tabellen einen??
Bitte Leute
HEEEELFT MIIIIR!!!
__________________
|
|
|
04.06.2006 21:38 |
|
|
janinchen
It's me!
Dabei seit: 24.11.2005
Beiträge: 1.043
Herkunft: Baden-Württemberg
Themenstarter
|
|
Sorry, dass ich erst jetzt schreibe
Vielen Dank, Ophelia.
Kann ich in den Kopf einen CSS Code einbauen (der dann zb. für tabellen also table {..} gilt, einbauen, und in die Tabelle, die anders erscheinen soll also wo die Table einen gestrichelten rand haben soll direkt in die Tabelle reintun? Also der CSS Code im Kopf gilt dann für all Tabellen, und ein CSS in der Tabellen selbst hat aber eine höhere Priorität als der im Kopf? Ist das so??
Wär toll, wenn nochmal jemand antworten könnte
__________________
|
|
|
10.06.2006 20:53 |
|
|
|
Impressum
|
