Opera und NS6 unterschiede -> getElementById tabelle

[Alain]

Hallo,
ich probiere seit tagen an einem tabellen ausricht oder breite bzw. anzeige-bereich problem zwischen opera und NS6-7...
Kann mir jemand sagen warum opera dies
display="<table cellspacing="0" cellpadding="0" style="background-color:black" width="180px"><td style="position:absolute;top:50px;left:auto;text-align:center;background-color:white" width="180px" height="20"></td><td style="position:absolute;top:50px;left:auto;text-align:center;background-color:aqua" width=""+(prozent*1.4)+"px" height="20"></td><font style="font-family:sans-serif;font-size:12px;color:red;position:absolute;top:50px">&nbsp;"+count+" Images... "+prozent+"%</font></table>";

unterstützt und NS6-7 nicht?Der opera zeigt mir eine tabelle mit hintergrund und einer schrift mittig,dann wird die hintergrundfarbe mit einer anderen farbe überlabbt(jenachdem wie gross prozent ist),die schrift bleibt,NS6-7 bleibt die hintergrundfarbe immer gleich und zwar in aqua farbe.
Wenn ich nur den table so
<table cellspacing="0" cellpadding="0" align="center">
ändere,das andere sonst so lasse,dann zeigen mir beide browser die farbüberlappungen an,wenn auch nicht mit ganz zentrierter tabelle,der opera zeigt mir die schrift umgebrochen und z.T. ausserhalb der tabelle bzw. <td> bereich an,der netscape zeigts mir so an wie es sein soll.
Gibts da keine einheitliche lösung,oder muss ich die beiden per javascript explizit trennen und für jeden einen seperaten code schreiben?
Ich möchte nur die tabelle mittig mit zentriertem text und einem anzeige bereich von 120px breit 20px höhe bzw. überfahren der einen hintergrundfarbe(white)in die andere farbe(aqua) haben,das ist alles ;-)
Gruss vom
Alain

[Dieter Raber]

Hallo Alain,

display="<table cellspacing="0" cellpadding="0" style="background-color:black" width="180px">

• display ist ein Keyword in Javascript und kann deswegen kein Variablennamen sein
• warum bestimmst Du die Hintergrundfarbe mit CSS, die Weite, cellspacing und cellpadding aber nicht?
• warum ist dein style inline?

<td style="position:absolute;...

• wo steht dein <tr>?
• CSS siehe oben
• fuer eine Tabellenzelle ist position:absolute nicht sinnnvoll

[...]></td><td [...] width=""+(prozent*1.4)+"px" height="20"></td>

• hier ist die Zelle zu Ende, aber ...

<font style="[...]>&nbsp;"+count+" Images...

• ...hier faengt Ihr Inhalt erst an
• font kennt kein style-Attribut

[...]</font></table>

• keine Zelle, kein <tr> weit und breit

Ehrlich gesagt, wenn ich ein Browser waere, wuerde ich garnichts anzeigen, ich wuerde hoechstens ein bisschen abstuerzen und dann leise vor mich hinweinen. Wenn's mir dann ein bisschen wohler waere, wuerde ich mein Herrchen zwingen, SelfHTML lesen und solange rumprobieren, bis es HTML und CSS verstanden haette. Und dann, aber erst dann wuerde ich ihm was von Javascript erzaehlen.

Gruß,

Dieter

[MudGuard]

Hi,

• font kennt kein style-Attribut

doch:

<!ATTLIST FONT
  %coreattrs;                          -- id, class, style, title --
  %i18n;                       -- lang, dir --
  size        CDATA          #IMPLIED  -- [+|-]nn e.g. size="+1", size="4" --
  color       %Color;        #IMPLIED  -- text color --
  face        CDATA          #IMPLIED  -- comma-separated list of font names --
  >
<!ENTITY % coreattrs
 "id          ID             #IMPLIED  -- document-wide unique id --
  class       CDATA          #IMPLIED  -- space-separated list of classes --
  style       %StyleSheet;   #IMPLIED  -- associated style info --
  title       %Text;         #IMPLIED  -- advisory title --"
  >

cu,
Andreas

[Dieter Raber]

Mensch Andreas,

manchmal glaube ich, Du kannst diese ganzen verdammten Specs auswaendig ;-)

Also @Alain, ich korrigiere mich, von Andreas etwas Besseren belehrt (und das nicht zu ersten Mal...):
Zwar kennt <font> das style-Attribut, aber es macht nicht viel Sinn, innerhalb des (ohnehin veralteten) <font>-Elements styles fuer Fonts zu benutzen. Ist naemlich doppelt gemoppelt.

Gruß

Dieter

[MudGuard]

Hi,

manchmal glaube ich, Du kannst diese ganzen verdammten Specs auswaendig ;-)

Nö - aber ich weiß, daß style praktisch für alle "sichtbaren" Elemente definiert ist - der Rest war: gewußt wo nachschlagen.

cu,
Andreas

[wahsaga]

hi,

Kann mir jemand sagen warum opera dies
display="<table cellspacing="0" cellpadding="0" style="background-color:black" width="180px"><td style="position:absolute;top:50px;left:auto;text-align:center;background-color:white" width="180px" height="20"></td><td style="position:absolute;top:50px;left:auto;text-align:center;background-color:aqua" width=""+(prozent*1.4)+"px" height="20"></td><font style="font-family:sans-serif;font-size:12px;color:red;position:absolute;top:50px">&nbsp;"+count+" Images... "+prozent+"%</font></table>";

unterstützt und NS6-7 nicht?

das ist ein simpler string, der einer variablen zugewiesen wird.
was gibt es daran zu "unterstützen"?

wenn du ein HTML-darstellungsproblem diskutiert haben willst, dann poste bitte auch relevanten HTML-code, und nicht irgendwas aus irgendeiner programmiersprache.

gruß,
wahsaga

[twb]

Hallo,

Hallo Alain!

display="<table cellspacing="0" cellpadding="0" style="background-color:black" width="180px"><td style="position:absolute;top:50px;left:auto;text-align:center;background-color:white" width="180px" height="20"></td><td style="position:absolute;top:50px;left:auto;text-align:center;background-color:aqua" width=""+(prozent*1.4)+"px" height="20"></td><font style="font-family:sans-serif;font-size:12px;color:red;position:absolute;top:50px">&nbsp;"+count+" Images... "+prozent+"%</font></table>";

Kann es sein, lieber Alain, dass mir dieser Quellcode - zumindest ansatzweise - bekannt vorkommt? =:-)

Gibts da keine einheitliche lösung,oder muss ich die beiden per javascript explizit trennen und für jeden einen seperaten code schreiben?

Was spricht denn gegen meine Lösung:

function preload()
{
count=0;
image=new Array ('bildx.jpg','bildy.gif','etc.gif');
picture=new Array(image.length);
for (i=0;i<image.length;i++)
{
picture[i]=new Image();
picture[i].onload=loadcheck;
picture[i].src=image[i];
}
}

function loadcheck()
{
count++;
percent=Math.round(count/image.length*100);
if (count>0&&count<image.length)
{
display="<table cellspacing="0" cellpadding="0" style="position:absolute;top:100;left:100"><tr><td height="24" width=""+percent+"" style="background-color:#ff0000">&nbsp;</td><td height="24" width=""+(100-percent)+"" style="background-color:#ffffff">&nbsp;</td></tr></table><font style="font-family:Arial,sans-serif;font-size:14pt;white-space:nowrap;position:absolute;top:"+(topoffset-tileoffset+1)+";left:"+(leftoffset-tileoffset)+"">&nbsp;Loading...&nbsp;"+percent+"%</font>";
document.getElementById("screen").innerHTML=display;
}
else weiterimtext();
}

[Dieter Raber]

Hallo twb,

Deine Funktion ist ja ausgesprochen huebsch, loest aber das Problem nicht, dass der erzeugte HTML-Code mehr als fehlerhaft ist.

Gruß,

Dieter

[twb]

Deine Funktion ist ja ausgesprochen huebsch,

Dankedanke.

loest aber das Problem nicht, dass der erzeugte HTML-Code mehr als fehlerhaft ist.

So, wo denn? Der ausgegebene HTML-Code

<table cellspacing="0" cellpadding="0" style="position:absolute;top:99;left:99"><tr><td height="24" width="500" style="background-color:#ff0000">&nbsp;</td><td height="24" width="50" style="background-color:#ffffff">&nbsp;</td></tr></table><font style="font-family:Arial,sans-serif;font-size:14pt;white-space:nowrap;position:absolute;top:99;left:99">&nbsp;Loading...&nbsp;99%</font>

(99 als fiktiver Wert für div. Variablen) erweist sich vielleicht nicht als Inbegriff der Eleganz, aber doch als valides HTML 4.01.

Herzlich, twb

[Dieter Raber]

Hallo twb,

So, wo denn? Der ausgegebene HTML-Code

<table cellspacing="0" cellpadding="0" style="position:absolute;top:99;left:99"><tr><td height="24" width="500"

Das ist aber nicht der Code, der rauskommt, sondern folgender (Attribute weggelassen, Variablen durch 99 ersetzt)
<table>
<td></td>
<td></td>
<font> 66 Images... 99%</font>
</table>

Da fehlen eine Menge <tr> und der Zellinhalt steht ausserhalb der Zelle. Von <font> mit Style-Attributen will ich mal garnicht reden, nicht mal mit MudGuard ;-)

Zum Testen:
<script>
document.write("&lt;table cellspacing="0" cellpadding="0" style="background-color:black" width="180px"&gt;&lt;td style="position:absolute;top:50px;left:auto;text-align:center;background-color:white" width="180px" height="20"&gt;&lt;/td&gt;&lt;td style="position:absolute;top:50px;left:auto;text-align:center;background-color:aqua" width=""+(99*1.4)+"px" height="20"&gt;&lt;/td&gt;&lt;font style="font-family:sans-serif;font-size:12px;color:red;position:absolute;top:50px"&gt;&nbsp;"+99+" Images... "+99+"%&lt;/font&gt;&lt;/table&gt;");
</script>

Gruß,

Dieter

[twb]

Das ist aber nicht der Code, der rauskommt, sondern folgender >> <table>
<td></td>
<td></td>
<font> 66 Images... 99%</font>
</table>

Da fehlen eine Menge <tr> und der Zellinhalt steht ausserhalb der Zelle.

Ziemlich falsch.

1. In

<table cellspacing="0" cellpadding="0"
style="position:absolute;top:99;left:99"><tr><td height="24"
                                         ^^^^
width="500" style="background-color:#ff0000">&nbsp;</td><td
height="24" width="50" style="background-
color:#ffffff">&nbsp;</td></tr></table>
                          ^^^^^
<font style="font-family:Arial,sans-serif;font-size:14pt;white-
space:nowrap;position:absolute;top:99;left:99">&nbsp;Loading...&nbsp;99%</font>

gibt's die Definition einer regulären Tabellenzeile (<tr>), und um mehr geht's ja gar nicht.

2. ist die <font>-Sequenz gar kein Zellinhalt, sondern ein eigenständiges Element. Was Fonts mit Style-Attributen angeht - stattgegeben. Immerhin: Schlanke Lösung.

Herzlich, twb

[Dieter Raber]

Hallo twb,

Was entgeht mit hier?

Code aus OP:
display="<table cellspacing="0" cellpadding="0" style="background-color:black" width="180px"><td style="position:absolute;top:50px;left:auto;text-align:center;background-color:white" width="180px" height="20"></td>

also:
<table cellspacing="0" cellpadding="0" style="background-color:black" width="180px">
<td style="position:absolute;top:50px;left:auto;text-align:center;background-color:white" width="180px"height="20">
</td>

Wo siehst Du hier ein <tr>, das ich nicht sehe?

Übrigens bin ich gestern durch ein Posting von Dir auf Chicago 7 aufmerksam geworden und hab mir ein bisschen was von Euren Sachen angehört - sehr schöne Musik!

Gruß,

Dieter

[MudGuard]

Hi,

Was entgeht mit hier?

Daß der Code des OP und der von twb nicht identisch sind?

cu,
Andreas

[Dieter Raber]

Hallo MudGuard,

Daß der Code des OP und der von twb nicht identisch sind?

Aah, jetzt verstehe ich das Missverstaendnis, ich beziehe mich dauernd auf den OP-Code, twb hingegen auf den aus seiner Funktion. Tja, manchmal sieht man den HTML-Code vor lauter Inlinestyles und Backslashes nicht mehr...

Gruß,

Dieter

[twb]

Was entgeht mit hier?
Code aus OP:

Dir entgeht wenig, sehr wenig, wie ich sehe: Ich habe mich auf _meinen eigenen_ Code aus http://www.mahjongg.li bezogen, den ich im OP wiedererkannte. Dass Alain die table row verschluckt hat, ist vielmehr mir entgangen. _Ich_ dagegen hänge halt sehr an Tabellenzeilen... =:-)

Übrigens bin ich gestern durch ein Posting von Dir auf Chicago 7 aufmerksam geworden und hab mir ein bisschen was von Euren Sachen angehört - sehr schöne Musik!

Das, lieber Dieter, geht runter wie Honig - stell Dir vor: Meine Band hat an Silvester das 20-Jahr-Jubiläum gefeiert. (Breites Grinsen).

Herzlich, twb

[Alain]

hallo twb und konsorte ;-),
ja Du hattest recht es ist dein code,bzw. die tabelle die
dynamisch angezeigt wird,was mir nicht gefällt ist die ausrichtung (links)
Ich möchte die tabelle bzw. dieser(Dein) dynamischer loader http://www.mahjongg.li/ in eine bestimmte höhe und mittig ausrichten,was mir bis jetzt nicht gelungen ist,zumal der NS6-7 und opera sich nicht einig sind bzw. nicht auf einen punkt kommen->keine ahnung warum.
Wenn ich das schaffen würde,dann könnte ich einiges an javascript sparen.

Das ist aber nicht der Code, der rauskommt, sondern folgender >> <table>
<td></td>
<td></td>
<font> 66 Images... 99%</font>
</table>

Da fehlen eine Menge <tr> und der Zellinhalt steht ausserhalb der Zelle.

Ziemlich falsch.

hmmm. ich denke auch dass <tr></tr> unnötig ist weil es ja kein zeilen umbruch gibt.
wäre einfach gesagt
<table>
<td>textinhalt</td>
</table>
nicht korrekter? ich meine es gibt nur eine zeile?!
Gruss
Alain
P.S.und @Dieter dein zitat "...bisschen wohler waere, wuerde ich mein Herrchen zwingen, SelfHTML lesen..." was glaubst du was ich die ganze zeit tue?Mickey-Maus lesen? Mit html-style konnte ich mich nie richtig anfreunden in all den jahren...sorry.Muss aber jetzt vermutlich leider sein,das dähmliche html à la style...

[MudGuard]

Hi,

wäre einfach gesagt
<table>
<td>textinhalt</td>
</table>
nicht korrekter?

Nein, das ist blanker Unsinn. td-Elemente dürfen nicht direkt in table- bzw. tbody-Elementen stehen.

cu,
Andreas

[MudGuard]

Hi,

Nein, das ist blanker Unsinn. td-Elemente dürfen nicht direkt in table- bzw. tbody-Elementen stehen.

Nachtrag: genaugenommen ist es blanker Unsinn, überhaupt eine Tabelle zu verwenden, wenn diese nur eine einzige Zelle enthält.

cu,
Andreas

[Alain]

Hi,

Nachtrag: genaugenommen ist es blanker Unsinn, überhaupt eine Tabelle zu verwenden, wenn diese nur eine einzige Zelle enthält.

Wie soll ich dann der schrift eine hintergrund farbe verpassen wenn nicht mit <td bgcolor...>text</td> ?
Dann bräuchte man also doch zwei
(und mit <tr>?)
<td bgcolor...>text</td><td bgcolor...>text</td>
wenn nur eine zeile für tabelle in meinem fall bzw. twb's fall oben?
Gruss
Alain

[MudGuard]

Hi,

Nachtrag: genaugenommen ist es blanker Unsinn, überhaupt eine Tabelle zu verwenden, wenn diese nur eine einzige Zelle enthält.
Wie soll ich dann der schrift eine hintergrund farbe verpassen wenn nicht mit <td bgcolor...>text</td> ?

Jedem HTML-Element kann per CSS eine Hintergrundfarbe verpaßt werden - dafür ist keine Tabelle erforderlich.

Dann bräuchte man also doch zwei
(und mit <tr>?)
<td bgcolor...>text</td><td bgcolor...>text</td>
wenn nur eine zeile für tabelle in meinem fall bzw. twb's fall oben?

Kannst Du das mal verständlich formulieren - vielleicht sogar als korrekten Satz?

cu,
Andreas

[Alain]

Hi,

Kannst Du das mal verständlich formulieren - vielleicht sogar als korrekten Satz?

ich brauch eine tabelle desshalb,weil sich eine hintergrundfarbe ändert
siehe beispiel http://www.mahjongg.li/ loadbar,das kann man nicht alleine mit style  bewerkstelligen.
Danke
Gruss
Alain

[MudGuard]

Hi,

Hi,

Kannst Du das mal verständlich formulieren - vielleicht sogar als korrekten Satz?

ich brauch eine tabelle desshalb,weil sich eine hintergrundfarbe ändert
siehe beispiel http://www.mahjongg.li/ loadbar,das kann man nicht alleine mit style  bewerkstelligen.

Nur wegen der Hintergrundfarbe brauchst Du KEINE Tabelle.

cu,
Andreas

[Dieter Raber]

Hallo Alain,

P.S.und @Dieter dein zitat "...

Tut mir leid, wenn das bei Dir ein bisschen bösartig angekommen ist, so war's naemlich nicht gemeint.
Was Stylesheets anbetrifft, glaub mir es ist die Muehe wert. Ich hab mich seinerzeit auch anfaenglich ein bisschen schwer damit getan, aber heute wuerde ich sie keinesfalls mehr missen wollen.

Gruß,

Dieter

[Alain]

Hallo twb!

Was spricht denn gegen meine Lösung:

eigentlich nichts,aber mir störte die ausrichtung(nicht zentriert und ganz oben->stattdessen wäre mir lieber die loadbar (tabelle)zentriert und etwa in der mitte des bildschirms.

Ich poste meine lang probierte version gerne hier:
Nr.1) javascript-version:
prozent=Math.round(count/image.length*100);
display="<table cellspacing="0" cellpadding="0"
align="center"><tr><td height="24" width="300"
style="position:absolute; top:70px;
left:"+(document.body.clientWidth-300)/2+"px;
background-color:blue">&nbsp;</td><td height="24"
width=""+(prozent*3)+"" style="position:absolute; top:70px; left:"+(document.body.clientWidth-300)/2+"px;
background-color:aqua">&nbsp;</td></tr><font style="font-family:sans-serif; font-size:12pt; color:red; position:absolute; top:70px; left:"+(document.body.clientWidth-300)/2+"px">&nbsp;Loading...&nbsp;"+prozent+"%</font>
</table>";
if (DOM||IE)document.getElementById("screen").innerHTML=display;

Nr.2) (table)html-version:

<table cellspacing="0" cellpadding="0">
<tr>
<td height="24" width="300" style="position:absolute; top:70px;
left:"+(document.body.clientWidth-300)/2+"px; background-color:blue">&nbsp;
</td>
<td height="24" width="+(prozent*3)+" style="position:absolute; top:70px;
left:"+(document.body.clientWidth-300)/2+"px; background-color:aqua">&nbsp;
</td>
<font style="font-family:sans-serif; font-size:12pt; color:red; position:absolute; top:70px; left:"+(document.body.clientWidth-300)/2+"px>&nbsp;Loading...&nbsp;"+prozent+"%</font>
</tr>
</table>...->etwas nachgebessert im unterschied zur javascript version ;-)
So nun nochmal nen dank an die unteren antworten,die mir helfen (aber leider nicht viel genützt) (haben)/wollten.
Aber in zukunft,wärs vielleicht angebracht sachlich/konkret auf fragen zu antworten und nicht lange um den brei herum labern(wenn und aber),was erstens nur unnötige energie(und nerven) belastet(beidseits) und natürlich unsere kostbare zeit...so als tip fürs selfhtml-forum und dieses neue jahr gedacht und nicht bös gemeint.
In diesem sinne...Gruss vom
Alain

[Alain]

Hallo twb!
falls es Dich interessiert,das script unterstützt alle browser die ich kenne bzw. habe im gegensatz zu deiner version.
Ich poste mal das komplette script hier:
var image=new Array ('bild1.jpg','bild2.jpg','bild3.jpg'...ect.);

var ypos=180; //POSITION OF LOAD BAR FROM TOP OF WINDOW, IN PIXELS
var loadcol='aqua' ;    // PROGRESS BAR COLOR
var unloadcol='blue';  // BGCOLOR OF UNLOADED AREA
var barheight=20;     // HEIGHT OF PROGRESS BAR IN PIXELS (MIN 20)
var barwidth=400;    // WIDTH OF THE BAR IN PIXELS
var bordcol='black';// COLOR OF THE BORDER

var DOM=false, IE=false, NS4=false, OP=false;
if (window.opera)
{
OP=true;
}
else if (document.getElementById&&!document.all) {
DOM=true;
}
else if (document.all) {
IE=true;
}
else if (document.layers) {
NS4=true;
}

var size=barwidth/(image.length);
barheight=Math.max(barheight,20);
var imgdone=false;
var count=0, outer, done, img=new Array();
if(NS4||IE){
var txt=(NS4)?'<layer name="outer" bgcolor="'+bordcol+'" visibility="hide">' : '<div id="outer" style="position:absolute; top:0px; left:0px; width:'+barwidth+'px; height:'+barheight+'px; visibility:hidden; background-color:'+bordcol+'">';
txt+='<table border="0" cellspacing="0" cellpadding="0"><td width="'+barwidth+'" height="'+barheight+'" align="center">';
if(NS4)txt+='<ilayer width="100%" height="100%"><layer width="100%" height="100%" bgcolor="'+unloadcol+'" top="0" left="0">';
txt+='<table border="0" cellspacing="0" cellpadding="0"><td width="'+barwidth+'" height="'+barheight+'" bgcolor="'+unloadcol+'" align="center"><font color="'+loadcol+'" size="2" face="sans-serif">Pre Loading...</font></td></table>';
if(NS4) txt+='</layer>';
txt+=(NS4)? '<layer name="done" width="100%" height="'+barheight+'" top="0" left="0">' : '<div id="done" style="position:absolute; top:0px; left:0px; width:'+barwidth+'px; height:'+barheight+'px; Z-Index:100">';
txt+='<table border="0" cellspacing="0" cellpadding="0"><td width="'+barwidth+'" height="'+barheight+'" bgcolor="'+loadcol+'" align="center"><font color="'+unloadcol+'" size="2" face="sans-serif">Pre Loading...</font></td></table>';
txt+=(NS4)? '</layer></ilayer>' : '</div>';
txt+='</td></table>';
txt+=(NS4)?'</layer>' : '</div>' ;
document.write(txt);
}//konnte den IE leider nicht einbinden für GetById

if(NS4){
outer=document.outer;
done=document.outer.document.layers[0].document.done;
}
else if(DOM||OP){
outer=document.getElementById('outer');
done=document.getElementById('done');
}
else {
outer=document.all.outer;
done=document.all.done;
}

setpos();

for(i=0;i<image.length;i++){
img[i]=new Image();
img[i].onload = checkload;
img[i].src=image[i];
}

function setpos(){
var ww=(IE||DOM||OP)? document.body.clientWidth : window.innerWidth;
var x=(ww-barwidth)/2;
if(NS4){
outer.moveTo(x,ypos);
outer.visibility="show";
}
else if(IE){
outer.style.left=x+'px';
outer.style.top=ypos+'px';
outer.style.visibility="visible";
}
cplayer(done,0,0,barheight,0);
}

function dispbar(){
cplayer(done, 0, size*count, barheight, 0);
if(count>=image.length)hidebar();
}

function checkload(){
count++;
prozent=Math.round(count/image.length*100);

if (count<=image.length) {

if (DOM||OP) {
var display="<table cellspacing="0" cellpadding="0""><tr><td height="24" width="300" style="position:absolute; top:70px; left:"+(document.body.clientWidth-300)/2+"px; background-color:blue">&nbsp;</td><td height="24" width=""+(prozent*3)+"" style="position:absolute; top:70px; left:"+(document.body.clientWidth-300)/2+"px; background-color:aqua">&nbsp;</td><font style="font-family:sans-serif; font-size:12pt; color:red; position:absolute; top:70px;left:"+(document.body.clientWidth-240)/2+"px">&nbsp;Loading..."+count+"&nbsp;Images..."+prozent+"%</font></tr></table>";
document.getElementById("screen").innerHTML=display;
if(prozent>=100)hidebar();
}
else dispbar();
setTimeout('hidebar()', 10000);//falls der load ausfällt nach 10 sekunden abruch
status='Images'+count+' Pre Load...'+prozent+'%';
} else hidebar();
}

function hidebar(){
if(NS4)outer.visibility="hide";
if(IE)outer.style.visibility="hidden";
status='Pre Load complete!';
imgdone=true;
location.href="welcome.html";//wenn die bilder geladen sind,weiterleiten
}

function cplayer(layer, ct, cr, cb, cl){
if(NS4){
layer.clip.top=ct;
layer.clip.right=cr;
layer.clip.left=cl;
}
if(IE)layer.style.clip='rect('+ct+' '+cr+' '+cb+' '+cl+')';
}

Gruss
Alain
P.S.Falls jemand bessere ideen hat zum SCRIPT(vorallem wegen dem IE),dann ohne hemmungen mitteilen.

[Alain]

hallo again and last, ;-)

zu meinem kommentar

P.S.Falls jemand bessere ideen hat zum SCRIPT(vorallem wegen dem IE),dann ohne hemmungen mitteilen.

ich habs jetzt endlich geschafft,dass der IE das ganze auch anzeigt wie der NS6-7 und opera,somit einiges an javascript gespart.
Hier nochmal die komplette version:

var image=new Array ('bild1.jpg','bild2.jpg','etc.jpg');

var NS4=false, IE=false, DOM=false;
if (document.getElementById) {
DOM=true;
}
else if (document.all) {
IE=true;
}
else if (document.layers) {
NS4=true;
}

var imgdone=false;
var count=0, outer, done, img=new Array();
if(NS4){
var ypos=100; //POSITION OF LOAD BAR FROM TOP OF WINDOW, IN PIXELS
var loadcol='aqua' ;    // PROGRESS BAR COLOR
var unloadcol='blue';  // BGCOLOR OF UNLOADED AREA
var barheight=20;     // HEIGHT OF PROGRESS BAR IN PIXELS (MIN 20)
var barwidth=400;    // WIDTH OF THE BAR IN PIXELS
var bordcol='black';// COLOR OF THE BORDER
var size=barwidth/(image.length);
barheight=Math.max(barheight,20);
var txt='<layer name="outer" bgcolor="'+bordcol+'" visibility="hide"><table border="0" cellspacing="0" cellpadding="0"><td width="'+barwidth+'" height="'+barheight+'" align="center"><ilayer width="100%" height="100%"><layer width="100%" height="100%" bgcolor="'+unloadcol+'" top="0" left="0"><table border="0" cellspacing="0" cellpadding="0"><td width="'+barwidth+'" height="'+barheight+'" bgcolor="'+unloadcol+'" align="center"><font color="'+loadcol+'" size="2" face="sans-serif">Pre Loading...</font></td></table></layer><layer name="done" width="100%" height="'+barheight+'" top="0" left="0"><table border="0" cellspacing="0" cellpadding="0"><td width="'+barwidth+'" height="'+barheight+'" bgcolor="'+loadcol+'" align="center"><font color="'+unloadcol+'" size="2" face="sans-serif">Pre Loading...</font></td></table></layer></ilayer></td></table></layer>';
document.write(txt);
}
if(NS4){
outer=document.outer;
done=document.outer.document.layers[0].document.done;
}
if(NS4)setpos();
for(i=0;i<image.length;i++){
img[i]=new Image();
img[i].onload = checkload;
img[i].src=image[i];
}

function dispbar(){
cplayer(done, 0, size*count, barheight, 0);
if(count>=image.length)hidebar();
}

function checkload(){
count++;
prozent=Math.round(count/image.length*100);
if (count<=image.length) {
if (DOM||IE) {
var xpos = (document.body.clientWidth-260)/2;
display="<table cellspacing="0" cellpadding="0" width="260" style="position:absolute; top:70px; left:"+xpos+"px"><tr><td height="24" width=""+(prozent*2.6)+"" style="background-color:aqua"></td><td height="24" width=""+(260-prozent*2.6)+"" style="background-color:blue"></td></tr></table><font style="font-family:sans-serif; font-size:12pt; color:black; position:absolute; top:71px;left:"+xpos+"px">&nbsp;&nbsp;PreLoad..."+count+"&nbsp;Images..."+prozent+"%</font>";
document.getElementById("screen").innerHTML=display;
if(prozent>=100)hidebar();
}
else dispbar();setTimeout('hidebar()', 30000);
status='Images'+count+' Pre Load...'+prozent+'%';
} else hidebar();
}

function setpos(){
var ww= window.innerWidth;
var x=(ww-barwidth)/2;
outer.moveTo(x,ypos);
outer.visibility="show";
cplayer(done,0,0,barheight,0);
}

function hidebar(){
if(NS4)outer.visibility="hide";
status='Pre Load complete!';
imgdone=true;
if(DOM||IE){
display="<table cellspacing="0" cellpadding="0" style="position:absolute; top:0px; left:0px"><tr><td>&nbsp;</td></tr></table>";
document.getElementById("screen").innerHTML=display;
}
location.href="welcome.html";
}

function cplayer(layer, ct, cr, cb, cl){
layer.clip.top=ct;
layer.clip.right=cr;
layer.clip.left=cl;
}

Gruss
Alain

[Struppi]

ich habs jetzt endlich geschafft,dass der IE das ganze auch anzeigt wie der NS6-7 und opera,somit einiges an javascript gespart.
Hier nochmal die komplette version:

Ich frage mich nach wie vor wozu das gut ist. wie schon mal erwähnt funktioniert ein Preloader nicht zuverlässig, vor allem im IE, da dieser u.U. die bilder trotzdem nochmal lädt (das bedeutet dann doppelte Ladezeit). Und wenn ich das richtig verstanden hatte, geht es dir um Bilder für einen Mausovereffekt, das widerrum läßt sich Prima mit CSS bewerkstelligen.

Ein Beispiel: http://css.maxdesign.com.au/listamatic/horizontal18.htm
Das das nicht im Netscape 4 funktioniert sollte nciht weiter stören, das so ein Effekt nur Beiwerk ist und du dir überlegen solltest, ob die Energie die du dafür verwendest um einen kleinen Effekt zu erzielen sich lohnt.

Wenn absolut nicht daruaf verzichten möchtest, guck dir das an http://javascript.jstruebig.de/source/mouseover.html dort ist ein preloader integriert.

Struppi.

[Alain]

hi struppi,

Ich frage mich nach wie vor wozu das gut ist. wie schon mal erwähnt funktioniert ein Preloader nicht zuverlässig, vor allem im IE, da dieser u.U. die bilder trotzdem nochmal lädt (das bedeutet dann doppelte Ladezeit). Und wenn ich das richtig verstanden hatte, geht es dir um Bilder für einen Mausovereffekt, das widerrum läßt sich Prima mit CSS bewerkstelligen.

ja ich habs jetzt so gelöst,dass der preloader auf einer leeren index.html seite alle bilder lädt und dann die seite weiterleited auf die eigentliche welcome-seite wo dann die bereits vorhandenen bilder geladen werden in die html seite->so gehts wunderbar
Wenn ich den prloader in eine html-seite intergriere,wo die grafiken bereits im html sind,dann geb ich Dir recht könnte es sein,dass die bilder zweimal geladen werden.
Ich möchte mit dieser version erreichen dass die benutzer die ganze welcome seite vollständig sehen und nicht voreilig auf den enter button klicken.
Natürlich hab ich für nojavascript user vorgesort...
<noscript><meta http-equiv="refresh" content="1; url=welcome.html"></noscript>
dürfte dieses problem lösen,obwohl nicht ganz html4 konform.

Ein Beispiel: http://css.maxdesign.com.au/listamatic/horizontal18.htm
Das das nicht im Netscape 4 funktioniert sollte nciht weiter stören, das so ein Effekt nur Beiwerk ist und du dir überlegen solltest, ob die Energie die du dafür verwendest um einen kleinen Effekt zu erzielen sich lohnt.

...bin in der beziehung perfektionist,es stört mir,wenn ich weiss dass es bei gewissen web-user nicht klappt->meine webseite->desshalb diese energie,für wie du sagst "kleine" effekte.
Und...nö Dein Bsp. erfüllt meinen zweck nicht und mit meiner version werden eben alle browser auch netscape 4 unterstützt.

Wenn absolut nicht daruaf verzichten möchtest, guck dir das an http://javascript.jstruebig.de/source/mouseover.html dort ist ein preloader integriert.

nö brauch ich so nicht,aber danke trotzdem.Werds mir aber nochmal genauer anschauen.
Gruss
Alain