Mal anschauen bitte: Wandernde Grafik soll im Rahmen bleiben

[Kalle_Worms]

Hallöle,

ich möchte eine Grafik laufen lassen und dabei die Breite und Höhe eines Rahmens (z.B. Window) ausnutzen.

Rechts sollte eigentlich width:100% und unten height:100% sein.

Doch das klappt nicht, die Grafik läuft aus dem Rahmen. Warum?

Bitte mal anschauen:
http://www.osmer.de/animation.htm

Lieben Gruß, Kalle

[XaraX]

Hallo,

Bitte mal anschauen:
http://www.osmer.de/animation.htm

Niedlich :)

<div> ist absolut positioniert. Daher werden die 90% von der gerenderten Ausgangsposition berechnet und nicht vom Anzeigerand. Man könnte  durch Rumrechnerei die Position von document.images['pingu'].offsetHeight http://de.selfhtml.org/javascript/objekte/all.htm und document.images['pingu'].offsetWidth ermitteln und gegen document.body.offset... und document.getElementsByTagName('body')[0].offsetTop / .offsetLeft abgleichen. Der Mozilla, IE und Opera spielt dort mit!

Gruß aus Berlin!
eddi

[XaraX]

In Berichtigung:

gegen document.images['pingu'].offsetTop / .offsetLeft abgleichen.

Gruß aus Berlin!
eddi

[Kalle_Worms]

... bin noch dabei, das zu checken. Scheint recht kompliziert, aber realistisch.

So könnte man wohl auch innerhalb einer Tabellenzelle agieren ...

[Axel Richter]

Hallo,

Doch das klappt nicht, die Grafik läuft aus dem Rahmen. Warum?
http://www.osmer.de/animation.htm
Ich möchte, dass sich das Bild nur innerhalb der roten Rechtecks <div> bewegt.
Es ist RELATIV zum roten Rechteck adressiert.

Nein. Es ist relativ zu _seiner_ normalen static-Position positioniert. Das ist nämlich die Bedeutung von position:relative. Wenn also das Bild normalerweise an Pos X, Y steht, dann wird es durch "position:relative; top:10px; left 10px" an Pos X+10px, Y+10px verschoben. Prozentangaben beziehen sich dabei _nicht_ auf den containing block, wie Du siehst.

Wenn Du ein Element _innerhalb_ eines containing blocks positionieren willst, dann nutze position:absolute.

probiere:

<img src='img/logo_linux.gif' name='pingu' style='position:absolute; left:0; top:0; border:none; width:3em'>

und
...
window.document.images['pingu'].style.top = pingu_y +'%';
...
window.document.images['pingu'].style.left = pingu_x +'%';

viele Grüße

Axel

[Kalle_Worms]

Hallo, Axel,

Wenn Du ein Element _innerhalb_ eines containing blocks positionieren willst, dann nutze position:absolute.

probiere:

<table><tr><td>Hallo</td><td>

<img src='img/logo_linux.gif' name='pingu' style='position:absolute; left:0; top:0; border:none; width:3em'>

</td></tr></table

Nöö, position:absolute bedeutet offenbar "bezogen auf die Ecke links oben der Webseite". Die Grafik steht NICHT in dem Tabellenfeld, in dem sie lt. HTML stehen sollte.

Absolute ist aber in Ordnung, wenn man die minimale und maximale Pixelposition rechnerisch ermittelt, NACHDEM der _container_ aufgebaut wurde.

Habe mal die Studienseite entspr. geändert, man kann, während die Grafik läuft, die Tabelle verkleinern / vergrößern:

http://www.osmer.de/animation.htm

... und wie ich gerade sehe, liegt der IE wieder daneben. Mit dem NS 7.1 geht's. Aber ist ja auch 'ne Studie.

Gruß, Kalle

[Axel Richter]

Hallo,

Wenn Du ein Element _innerhalb_ eines containing blocks positionieren willst, dann nutze position:absolute.

Nöö, position:absolute bedeutet offenbar "bezogen auf die Ecke links oben der Webseite".

Nöö, position:absolute bedeutet bezogen auf den containing block. Das ist das Eltern-Element mit einer Positionsangabe, die von static abweicht. Nur, wenn es das nicht gibt, dann ist es der View-Port.  Eine Tabellenzelle ist _kein_ containing block, weil sie eine Besonderheit (table-cell) darstellt.
probiere:
<table><tr><td>Hallo</td><td>
<div style="position:relative; width:300px; height:300px;">
<img src='img/logo_linux.gif' name='pingu' style='position:absolute; left:0; top:0; border:none; width:3em'>
</div>
</td></tr></table

viele Grüße

Axel

[XaraX]

Hallo,

http://www.osmer.de/animation.htm

Anzumerken bleibt: Tux läuft nicht ganz rund! ;)

In dem Sinne Gute Nacht
eddi