Preloader/Layer-Position

Und noch mal ich...

Frage 1:
Kann ich eine Art Preloader ausschließlich mit Javascript
basteln? Simplerweise hätte ich einfach ein "Moment noch!"
hinter das zu ladende Bild gesetzt, aber es handelt sich um
eine Image-Map (und Layer), also wird auch eifrig weitergeladen,
wenn das Hauptbild schon da ist...

Frage2:
Selbige Image-Map habe ich jetzt, es erscheinen bei mouseover
diverse Bilderchen, deren Ausrichtung "absolute" ist. Wie
schaffe ich es, daß ich z.B. alle erscheinenden Pics
an der linken oberen Ecke der Map ausrichte, also die Position
unabhängig von der Fenstergröße ist? Meine ersten dilletantischen
Versuche mit "relative" gingen insofern in die Hose, als daß
jede weitere Layer sich an der Position der vorhergehenden
Layer orientieren. Offensichtlich mache ich irgendwas falsch,
bzw. habe ich nicht ganz die "relative"-Ausrichtung kapiert.

Ich danke für eure Hilfe!

Grüße, Jens

Jens Anhenn wrote:

Kann ich eine Art Preloader ausschließlich mit Javascript
basteln?

Ja. Hierzu kannst Du ein Image Objekt erstellen und ihm einen onload
Handler verpassen. Dieser feuert sobald das Bild geladen ist. Über einen
Counter oder ähnliches könntest Du dann bestimmen, ob alle Bilder
geladen sind.
Via Google findest Du sicherlich passende Beispiele.

Simplerweise hätte ich einfach ein "Moment noch!"
hinter das zu ladende Bild gesetzt, aber es handelt sich um
eine Image-Map (und Layer), also wird auch eifrig weitergeladen,
wenn das Hauptbild schon da ist...

"Moment noch" könnte ein absolut positioniertes div über Deinem
Hauptbild sein. Dieses versteckst Du, wenn alle Bilder geladen sind.

Frage2:
Selbige Image-Map habe ich jetzt, es erscheinen bei mouseover
diverse Bilderchen, deren Ausrichtung "absolute" ist. Wie
schaffe ich es, daß ich z.B. alle erscheinenden Pics
an der linken oberen Ecke der Map ausrichte, also die Position
unabhängig von der Fenstergröße ist?

Jedes Bild muss ebenfalls absolut positioniert (position:absolute) und
definierte Positionsangaben haben (left:0px; top:0px.
Am besten bastelst Du einen Container um das Element mit der Map und den
zusätzlichen Bildern. An diesem Container richtests Du dann die Elemente
aus.
Das ist allerdings CSS und hat mit JavaScript nichts mehr zu tun.
Bessere Gruppe für sowas ist dciwam.

Grüße
Daniel

Jens Anhenn <marvin (AT) uni-koblenz (DOT) de> schrieb:

Selbige Image-Map habe ich jetzt, es erscheinen bei mouseover
diverse Bilderchen, deren Ausrichtung "absolute" ist.

Nein, die Position ist absolut.

Wie schaffe ich es, daß ich z.B. alle erscheinenden Pics an der
linken oberen Ecke der Map ausrichte, also die Position unabhängig
von der Fenstergröße ist? Meine ersten dilletantischen Versuche
mit "relative" gingen insofern in die Hose, als daß jede weitere
Layer sich an der Position der vorhergehenden Layer orientieren.
Offensichtlich mache ich irgendwas falsch, bzw. habe ich nicht
ganz die "relative"-Ausrichtung kapiert.

Ohne es ausprobiert zu haben, probier doch mal hiermit rum:

<div><img src="test.png" alt="[Testbild]" style="position: absolute">
<img src="erscheinendesBild.png" alt="[Ausschnitt]" style="position:
relative"></div>

(Bitte nicht an dem Inhalt der alt-Attribute stören.)

--
( ROT-13 if you want to email me directly: uvuc (AT) ervzjrexre (DOT) qr )
"Sie tragen Trauer? Der Untergang der DDR?" - "Nein, Leni Riefenstahl.
Der Führer hat sie zu sich genommen." -- Abschiedsshow Scheibenwischer,
02.10.2003

Jens Anhenn wrote:

Kann ich eine Art Preloader ausschließlich mit Javascript basteln?

Ja. Google ist Dein Freund. [psf 6.1]

Simplerweise hätte ich einfach ein "Moment noch!" hinter das zu ladende
Bild gesetzt, aber es handelt sich um eine Image-Map (und Layer), also
wird auch eifrig weitergeladen, wenn das Hauptbild schon da ist...

Non sequitur. Was ist bei Dir "Image-Map (und Layer)"?

Für Bilder geht

<object data="blubb.png" standby="Moment noch!"></object>

ganz ohne J(ava)Script. Es ist sogar eine Alternative möglich,
wenn das Bild nicht gefunden werden kann:

<object data="blubb.png" standby="Moment noch!">
<img src="alternative.gif" alt="Laden fehlgeschlagen :-(">
</object>

Der Support für das object-Element von HTML 4.01 ist allerdings
auf neuere Browser beschränkt.


Pointed"hoverMe"Ears

Ja. Google ist Dein Freund. [psf 6.1]

Stimmt, gestern hatte ich aber nur welche mit Flash gefunden...

Non sequitur. Was ist bei Dir "Image-Map (und Layer)"?

Naja, eine Image-Map eben. Eine Weltkarte auf der ich Bereiche
definiert habe, um bei mouseover verschiedene Layer erscheinen
zu lassen. Wenn der Krempel jetzt lädt, kommrt eben erst die
karte, danach werden die ganzen Layer geladen, welche aber ja
eben noch nicht sichtbar sind. Und da es sich insg. dann doch
um 22 Layer mit zusammen 500kb handelt sollte so ein
alberner Balken erscheinen, bis alles geladen ist. Und eigentlich
muß es auch ken Blaken sein, ich habe mir jetzt schon überlegt,
einfach ein bitte warten an das Bild zu hängen, welches dann
von dem letzten geladenen Layer in weiß verdeckt wird.
Unter der Voeraussetzung, daß die Layer immer in der gleichen
Reihenfolge geladen werden, hätte ich so eine Statusleiste für
extrem Arme...

object data="blubb.png" standby="Moment noch!"></object

Werde ich einfach mal ausprobieren. Danke!


Jetzt muß ich nur noch rausfinden, an was sich "relative"
wirklich ausrichtet, aber da werde ich mich mal vertrauensvoll
an die zwei da oben wenden (wenn ich die Vorschläge ausprobiert
habe...)

Ich danke Dir,

Gruß, Jens

Jens Anhenn wrote:

Jetzt muß ich nur noch rausfinden, an was sich "relative"
wirklich ausrichtet.

position:relative richtet das Element am vorhergehenden Element
(previousSibling) aus.
position:absolute richtet das Element an dessen Parent (parentNode) aus.

Aber CSS Fragen dieser Art solltest Du besser in dciwam fragen, dort
sind die Experten für sowas.

Grüße
Daniel

Jens Anhenn wrote:

Wer hat das geschrieben? ---> <http://got.to/quote>
vvvvvvvvvvvvvvvvvvvvvvvv

Ja. Google ist Dein Freund. [psf 6.1]

Stimmt, gestern hatte ich aber nur welche mit Flash gefunden...

Ich meine hier vor allem Google *Groups*. Und auf
sogenanntes "Vorladen" kann man sich nicht verlassen,
auch sollte man damit vorsichtig umgehen (also bitte
nicht alle Grafiken einer Site auf einmal "vorladen"!).

<dcljs.faq-pointer.2004-05-31 (AT) ID-3767 (DOT) user.uni-berlin.de>

Non sequitur. Was ist bei Dir "Image-Map (und Layer)"?

Naja, eine Image-Map eben.

Und deshalb soll das nicht gehen? Eine Image-Map ist doch nur
ein Bild, für das Verweise für seine Bereiche definiert werden.

Eine Weltkarte auf der ich Bereiche definiert habe, um bei
mouseover verschiedene Layer erscheinen zu lassen.

Deine Layer haben damit gar nichts zu tun, da sie ja nicht sichtbar
sind. Du solltest allerdings jedem Bild im Layer ein sinnvolles
alt-Attribut mitgeben, damit man auch dann schon navigieren kann,
wenn das betreffende Bild noch nicht geladen wurde.

Wenn der Krempel jetzt lädt, kommrt eben erst die
karte, danach werden die ganzen Layer geladen, welche aber ja
eben noch nicht sichtbar sind. Und da es sich insg. dann doch
um 22 Layer mit zusammen 500kb handelt sollte so ein
alberner Balken erscheinen, bis alles geladen ist.

Lass es sein. Auch den "Statusleisten"-Mist. Beinahe jeder UA hat
eine Fortschrittsanzeige, Du verbrätst durch solche zusätzlichen
Spielereien nur sinnlos Systemressourcen. Siehe auch hierzu Google.

Jetzt muß ich nur noch rausfinden, an was sich "relative"
wirklich ausrichtet, aber da werde ich mich mal vertrauensvoll
an die zwei da oben wenden (wenn ich die Vorschläge ausprobiert
^^^^^^^^^^^^^^^^
habe...)

An wen?


PointedEars

Wer hat das geschrieben? ---> <http://got.to/quote

Du pißt Dich schon default-mäßig wegen jedem Mist an, oder?

Und deshalb soll das nicht gehen? Eine Image-Map ist doch nur
ein Bild, für das Verweise für seine Bereiche definiert werden.

Eben. Die Map wird geladen, danach die ganzen Layer.

Deine Layer haben damit gar nichts zu tun, da sie ja nicht sichtbar
sind. Du solltest allerdings jedem Bild im Layer ein sinnvolles
alt-Attribut mitgeben, damit man auch dann schon navigieren kann,
wenn das betreffende Bild noch nicht geladen wurde.

Mit bitte was haben die nichts zu tun?
Das alt-Attribut ist zum einen das kleinste Problem, zum anderen
in dem Fall völlig unnötig, da es nichts zu navigieren gibt.
Es ist ausschließlich eine Karte welche anhand von kleinen Pics
visualisieren soll, wohin schon alles verschickt worden ist.

Lass es sein. Auch den "Statusleisten"-Mist. Beinahe jeder UA hat
eine Fortschrittsanzeige, Du verbrätst durch solche zusätzlichen
Spielereien nur sinnlos Systemressourcen. Siehe auch hierzu Google.

Äh, ALLES? Naja, so eine kleine Seite hätte ich doch gerne gemacht...
Ich sagte nicht, daß ich diesen Balken will (--> "alberner Balken"),
ich soll ihn leider nur machen. Und daß ich in dem Fall wohl schon
alle Layer vorlade, liegt wohl nahe, sonst ist wohl der ganze mouseover-
Witz flöten gegangen.

An wen?

Holger & Daniel, oder wie viele hängen sonst noch in diesem Thread?


Grüße, Jens

Hi Daniel!

Tausend Dank für die Antwort! Jetzt habe ich endlich Zeit, es
auszuprobieren.

Jedes Bild muss ebenfalls absolut positioniert (position:absolute) und
definierte Positionsangaben haben (left:0px; top:0px.
Am besten bastelst Du einen Container um das Element mit der Map und den
zusätzlichen Bildern. An diesem Container richtests Du dann die Elemente
aus.

Bis jetzt hatte ich halt jedes Bild im eigenen Container, somit auch mit
jeweiliger Position. Aber der Gag mit dem Conainer um alles klingt gut,
dann bleibt wenigstens alles zusammen.

Das ist allerdings CSS und hat mit JavaScript nichts mehr zu tun.
Bessere Gruppe für sowas ist dciwam.

Hast recht, wollte nur kurz noch antworten.

Grüße
Daniel

Zurück!
Jens

Jens Anhenn wrote:

<http://got.to/quote> NOW!
vvvvvvvvvvvvvvvvvvvvvvvvvv

Wer hat das geschrieben? ---> <http://got.to/quote

Du pißt Dich schon default-mäßig wegen jedem Mist an, oder?

Oder. Schlecht geschlafen oder einfach neu im (deutschsprachigen)
Usenet (Newbie)?

Und deshalb soll das nicht gehen? Eine Image-Map ist doch nur
ein Bild, für das Verweise für seine Bereiche definiert werden.

Eben. Die Map wird geladen,

Nein, das *Bild*. Die clientseitige Image-Map (map-Element) ist
nur etwas, was zusätzlich für das Bild definiert wird (mittels
usemap-Attribut des input, img- oder object-Elements). Die wird
zwar auch (vorher oder nachher) geladen, das merkst Du aber nicht
beim Laden, sondern erst beim Fokussieren der entsprechenden
area-Elemente. Möglicherweise meinst Du aber auch etwas ganz
anderes.

danach die ganzen Layer.

Weshalb dann

,-<Xns94FCCA252A7C9marvinunikoblenzde (AT) 141 (DOT) 26.64.5>

[...]
Simplerweise hätte ich einfach ein "Moment noch!" hinter das zu ladende
Bild gesetzt, aber es handelt sich um eine Image-Map (und Layer), also
wird auch eifrig weitergeladen, wenn das Hauptbild schon da ist...
[...]

?

Deine Layer haben damit gar nichts zu tun, da sie ja nicht sichtbar
sind. Du solltest allerdings jedem Bild im Layer ein sinnvolles
alt-Attribut mitgeben, damit man auch dann schon navigieren kann,
wenn das betreffende Bild noch nicht geladen wurde.

Mit bitte was haben die nichts zu tun?

Mit dem

[...] "Moment noch!" hinter das zu ladende Bild [...]

Allerdings ist sowas (Layer hinter Bild) grundsätzlich Unfug.

Das alt-Attribut ist zum einen das kleinste Problem, zum anderen
in dem Fall völlig unnötig, da es nichts zu navigieren gibt.

Es ist nicht unnötig. Gültiges HTML 4.01 erfordert es, wenigstens
ein leeres. Das *alt*-Attribut bezeichnet nämlich *Alt*ernativtext,
wenn das Bild nicht angezeigt werden kann bzw. noch nicht fertig
geladen wurde. Ersteres passiert z.B. wenn Bilder deaktiviert sind
oder wenn das Dokument mit einem Textbrowser betrachtet wird oder ...

Es ist ausschließlich eine Karte welche anhand von kleinen Pics
visualisieren soll, wohin schon alles verschickt worden ist.

Egal.

Lass es sein. Auch den "Statusleisten"-Mist. Beinahe jeder UA hat
eine Fortschrittsanzeige, Du verbrätst durch solche zusätzlichen
Spielereien nur sinnlos Systemressourcen. Siehe auch hierzu Google.

Äh, ALLES? Naja, so eine kleine Seite hätte ich doch gerne gemacht...

Es gibt keine Webseiten.

Ich sagte nicht, daß ich diesen Balken will (--> "alberner Balken"),
ich soll ihn leider nur machen.

Dann hast Du ja jetzt genügend Argumente bekommen, um Deinem
Auftraggeber zu erklären, weswegen das Unfug ist. Das ist als
Webautor/Softwareentwickler nämlich auch Deine Aufgabe.

Und daß ich in dem Fall wohl schon alle Layer vorlade,

Nicht die Layer werden "vorgeladen", sondern allenfalls die
Image-Objekte.

Langsam bekomme ich den Eindruck, dass Du gar kein HTML, CSS
und J(ava)Script kannst, Dir nur vielmehr per Programm alles
zusammenklickst. Falls dem so ist: Das kann fatale Folgen
haben!

<http://karzauninkat.de/Goldhtml/>

Das driftet jetzt doch sehr in Richtung Webauthoring ab, ich
leite mal nach de.comm.infosystems.www.authoring.misc um.

liegt wohl nahe, sonst ist wohl der ganze mouseover-Witz flöten gegangen.

Nein. Ein "Mouseover-Effekt" funktioniert auch ohne Vorladen.
Oft funktioniert er sogar ohne clientseitiges Scripting.

An wen?

Du hast den Kontext zerstoert! [dsf 9.3]

Holger & Daniel, oder wie viele hängen sonst noch in diesem Thread?

"Oben" und "unten" sind keine sinnvollen Begriffe, um sich auf Teile
eines Threads zu beziehen. Die Postings können sonstwie sortiert sein.

Deine Message-IDs sind übrigens ungültig, IPv4-Adressen sind kein FQDN
(siehe "Technische Regeln"). Den Sender-Header musst Du nur setzen, wenn
Du nicht der Autor des Artikels bist. Siehe zu beidem und auch allgemein
zum Usenet

<http://einklich.net/usenet/usenet1.htm> ff.


HTH & HAND

PointedEars, X-Post & F'up2 <dciwam/>