Bild links unten einfügen JS

[Andreas]

Hallo Leute

Ich bin kurz vorm verzweifeln !!
Ich bin mir nicht gewohnt mit Layern zu arbeiten. Nur komme ich nun nicht darum herum :(

Ich habe nach langer suche ein geeignetes script gefunden nur bringe ich es nicht korrekt zum laufen.

So schauts aus:
<script LANGUAGE="JavaScript">
<!--
netscape = (document.layers) ? 1:0
goodIE = (document.all) ? 1:0
opera = (document.layers) ? 1:0
mozilla = (document.layers) ? 1:0
if (netscape) {
   var x1 = 0;
   var y1 = window.innerHeight - 392;
   }
if (goodIE) {
   x1 = 0;
   y1 = document.body.clientHeight- 392;
}
if (opera) {
   var x1 = 0;
   var y1 = window.innerHeight - 392;
   }
if (mozilla) {
   var x1 = 0;
   var y1 = window.innerHeight - 392;
   }

document.write("<div style="position:absolute; top:"+y1+"px; left:"+x1+"px;">");
document.write("<img src="img/girls_gross.jpg" width="177" height="392" alt="Girls" border="0" hspace="0" vspace="0">");
document.write("</div>");
//-->
</script>

Das ergebniss:
NS 4.7 = OK
IE 6.0 = OK
Opera  = Hier wird das bild anstelle unten, oben links angezeigt
NS 6.2 = Hier wird das bild anstelle unten, oben links angezeigt
Mozilla= Hier wird das bild anstelle unten, oben links angezeigt

Findet jemand einen Fehler?
Giebt es überhaubt ne möglichkeit (mit JS oder CSS) ein bild unten links einzufügen, so dass es auf den oben genannten Browsern Klapt?

Thanx zum voraus Andreas

[Sven Rautenberg]

Moin!

Ich habe nach langer suche ein geeignetes script gefunden nur bringe ich es nicht korrekt zum laufen.

So schauts aus:
<script LANGUAGE="JavaScript">
<!--
netscape = (document.layers) ? 1:0
goodIE = (document.all) ? 1:0
opera = (document.layers) ? 1:0
mozilla = (document.layers) ? 1:0

Opera und Mozilla kennen kein document.layers, sondern document.getElementById (und andere Methoden), um Elemente anzusprechen. Dadurch werden die für diese Browser gedachten Befehle weiter unten niemals ausgeführt.

if (netscape) {
   var x1 = 0;
   var y1 = window.innerHeight - 392;
   }
if (goodIE) {
   x1 = 0;
   y1 = document.body.clientHeight- 392;
}
if (opera) {
   var x1 = 0;
   var y1 = window.innerHeight - 392;
   }
if (mozilla) {
   var x1 = 0;
   var y1 = window.innerHeight - 392;
   }

document.write("<div style="position:absolute; top:"+y1+"px; left:"+x1+"px;">");
document.write("<img src="img/girls_gross.jpg" width="177" height="392" alt="Girls" border="0" hspace="0" vspace="0">");
document.write("</div>");
//-->
</script>

Das ergebniss:
NS 4.7 = OK
IE 6.0 = OK
Opera  = Hier wird das bild anstelle unten, oben links angezeigt
NS 6.2 = Hier wird das bild anstelle unten, oben links angezeigt
Mozilla= Hier wird das bild anstelle unten, oben links angezeigt

Findet jemand einen Fehler?
Giebt es überhaubt ne möglichkeit (mit JS oder CSS) ein bild unten links einzufügen, so dass es auf den oben genannten Browsern Klapt?

Dein Ansatz ist im Prinzip schon nicht schlecht - fehlt nur die Anpassung an heute gültige Javascript-Konstrukte. Nur IE 4 und NS 4 müssen extra behandelt werden (mit document.all und document.layers), alle anderen kennen das DOM nach W3C.

Wie man mit der "neuen Freiheit" arbeitet und Elemente anspricht, zeigt dir die SelfHTML-DHTML-Bibliothek: </selfhtml/dhtml/beispiele/index.htm>. Zumindest kannst du dir da abgucken, was du wissen mußt. Oder du schaust im </archiv/> nach oder benutzt die http://selfsuche.teamone.de dafür.

- Sven Rautenberg

[Andreas]

Hallo Sven,

Ich danke Dir für Deine mühe.
Verzeih mir das ich einen thread gestartet habe den Ihr schon 100x durchgekaut habt. Nur leider wurde ich mit der suche nicht fündig.

Ebenfals die links die Du mir gegeben hast haben mir als JS newbie nicht wirklich weitergeholfen da ich schon mal kein plan von JS habe.

Der code schaut nun folgendermassen aus:
<script LANGUAGE="JavaScript">
<!--
netscape = (document.layers) ? 1:0
goodIE = (document.all) ? 1:0
opera = (document.getElementById) ? 1:0
mozilla = (document.getElementById) ? 1:0
if (netscape) {
   var x1 = 0;
   var y1 = window.innerHeight - 392;
   }
if (goodIE) {
   x1 = 0;
   y1 = document.body.clientHeight- 392;
}
if (opera) {
   var x1 = 0;
   var y1 = window.innerHeight - 392;
   }
if (mozilla) {
   var x1 = 0;
   var y1 = window.innerHeight - 392;
   }

Er funzt nun auf allen browsern ausse MSIE !
Weshalb versteht nun msie den code nicht mer?

Oder hast Du fieleicht noch ein anderer link für Dummies wie mich parat?

Fielen Dank schonmal
Andreas

[Sven Rautenberg]

Moin!

Der code schaut nun folgendermassen aus:
<script LANGUAGE="JavaScript">
<!--
netscape = (document.layers) ? 1:0

Netscape 4 wird hier wahr liefern, alle anderen Browser falsch.

goodIE = (document.all) ? 1:0

IE (jede Version) wird hier wahr liefern, ebenso Opera im IE-Mode.

opera = (document.getElementById) ? 1:0

Opera, IE 5+, Mozilla und Netscape 6 werden hier wahr liefern.

mozilla = (document.getElementById) ? 1:0

Opera, IE 5+, Mozilla und Netscape 6 werden hier wahr liefern.

if (netscape) {
   var x1 = 0;
   var y1 = window.innerHeight - 392;

Das führt nur Netscape 4 aus.

}
if (goodIE) {
   x1 = 0;
   y1 = document.body.clientHeight- 392;

Das führen alle IEs aus, und Opera im IE-Mode.

}
if (opera) {
   var x1 = 0;
   var y1 = window.innerHeight - 392;

Das führen alle Browser außer IE 4 und Netscape 4 aus.

}
if (mozilla) {
   var x1 = 0;
   var y1 = window.innerHeight - 392;

Das führen alle Browser außer IE 4 und Netscape 4 aus.

}

Tja, da wird Code irgendwie doppelt und dreifach ausgeführt. Das könnte das Problem sein, sollte zumindest berücksichtigt werden.

Und deine Browsererkennung ist eigentlich keine Browsererkennung (muß es auch nicht sein), sondern nur eine Objekterkennung. Dann mußt du aber nicht zweimal getElementById erkennen, sondern nur einmal, und entsprechend auch nur einmal einen Programmteil dafür schreiben.

Ich verwende immer diese drei Zeilen:
ns4 = (document.layers)? true:false
ie4 = (document.all)? true:false
v6 = (document.getElementById)? true:false

Merke: IE5 fällt sowohl unter ie4, als auch unter v6, also die Codeausführung besser mit
if (v6) ...
else if (ie4)...
else if (ns4)...

machen. Dann wird garantiert nur ein Teil ausgeführt.

Ich hab' auch noch eine Browserfenstergrößenerkennung für dich. Pack diesen Code in deine Funktion:

var sizex=0;
  var sizey=0;
  if (window.innerWidth)
  {
    (window.innerWidth)?sizex=window.innerWidth:sizex=0;
    (window.innerHeight)?sizey=window.innerHeight:sizey=0;
  }
  else if (document.body)
  {
    (document.body.offsetWidth)?sizex=document.body.offsetWidth:sizex=Math.max(sizex,0);
    (document.body.offsetHeight)?sizey=document.body.offsetHeight:sizey=Math.max(sizey,0);
  }

Dann hast du hinterher in den Variablen sizex und sizey die Größe des Fensters, schlimmstenfalls auch 0 (Null). Bei den von dir verwendeten Browsern funktioniert es aber (und auch auf dem Mac).

Er funzt nun auf allen browsern ausse MSIE !
Weshalb versteht nun msie den code nicht mer?

Fehlermeldung?

Oder hast Du fieleicht noch ein anderer link für Dummies wie mich parat?

Schon mal nach "Javascript für Dummies" gesucht? http://www.google.com/search?q=Javascript+für+Dummies&sourceid=opera&num=50&ie=utf-8&oe=utf-8 Oder nach einem entsprechenden Tutorial, einer Einführung oder dergleichem? Hast du das Javascript-Kapitel in SelfHTML schon mal von Anfang bis Ende durchgelesen?

- Sven Rautenberg