Gegen Bilderklau - Das Original | Druckvorschau: Java-Script Bilderschau | Neues Problem: 2 verschiedene CSS Codes?

Geschrieben von janinchen am 30.05.2006 um 16:13:

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)&nbsp;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...

Geschrieben von janinchen am 30.05.2006 um 16:24:

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?

Geschrieben von janinchen am 30.05.2006 um 16:39:

Hier mal die Bilderbuchshow, bei der es geht (Auf "Anwendungsbeispiel" klicken)

Es sind halt hoch- und querformat- Bilder gemischt, sonst sind die ja gleich groß, also die Höhe ist zb. beim einen 400 beim andern ist dafür die Breite 400

Geschrieben von janinchen am 30.05.2006 um 16:48:

Muss ich das größte bid nehmen??

Also wie gesagt, alle gleich groß, nur Quer- und Hochformat-Pics!

Geschrieben von janinchen am 30.05.2006 um 17:04:

Ich denk, das is egal...

Wenn dann gehts alles ^^
Außerdem wär das ja irgendwann bei den andern Pferden dann ein Problem, weil die wahrsch. dann nicht alle gleich sind unglücklich

EDIT: Ich habs probiert ein Querformat pic als startpic zu nehmen. Nur das ist gleich von Anfang an verschoben und als Hochformat dargestellt *verzweifel*

Geschrieben von janinchen am 30.05.2006 um 17:12:

Kein Problem, kannst ja auch nicht alles wissen Augenzwinkern

Egal, vllt. kommt jemand anders drauf, oder ich such mal nach nem anderen ähnlichen code

Geschrieben von janinchen am 31.05.2006 um 14:08:

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 großes Grinsen

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 Augenzwinkern

) 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 ^^

Geschrieben von janinchen am 31.05.2006 um 21:05:

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

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 smile

Geschrieben von janinchen am 03.06.2006 um 11:13:

Bitte, Leute, kann mir keiner sagen, wie ich diesen Rahmen da wegbekomm?

Geschrieben von janinchen am 04.06.2006 um 12:18:

+hochschieb+

Geschrieben von janinchen am 04.06.2006 um 21:38:

Ok, hab eine Lösung für das Problem gefunden Augenzwinkern

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 Augenzwinkern

Hat einer ne Ahnung, wie/ob ich das "getrennt" machen kann, also bei der Bilderschau kein Rand aber bei den Tabellen einen??

Bitte Leute Augenzwinkern

HEEEELFT MIIIIR!!!

Geschrieben von janinchen am 07.06.2006 um 19:27:

*anfleh*

Brauch echt dringend eure Hilfe.

Kann ich CSS auch noch "einzeln" zum Objekt schreiben oder muss das immer in den Kopf der Page???

Bzw. wenn, wo kann ich in das JavaScript einen CSS Code einbinden?

Biiiiiittttteeeee Freude

Geschrieben von janinchen am 10.06.2006 um 20:53:

Sorry, dass ich erst jetzt schreibe Augenzwinkern

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 Augenzwinkern