Bilder übereinander legen - filter:alpha()

[J. Kurz]

Liebe Forenteilnehmer,

ich arbeite an einer umfangreichen Präsentation, in der Prozessabläufe dargestellt werden.
Diese möchte ich auf einer HTML-Seite zeigen.

Dazu habe ich, um einzelne Prozesse isoliert darstellen zu können, diese in separate Graphik-Dateien (.png) gespeichert.

Diese einzelnen "Teile" blende ich nun mit JavaScript ein- und aus.

So stelle ich mir vor, Prozesse, über die gesprochen wird, einzublenden und die anderen einfach auszublenden.

Mit dem alpha-Filter funktioniert das ganz gut. Allerdings wird, je mehr Graphiken man übereinander legt (durch Einblenden), die Darstellung immer unschärfer. Bereits bei drei Bildern wird das "unterste" ziemlich schlecht erkennbar.

Gibt es einen besseren Weg, Graphiken transparent übereinander zu legen, als mit filter:alpha ?

Bin auch für Linkangaben dankbar,
denn ich habe bisher im Web noch nichts Geeignetes gefunden.

danke
Gottes Segen

J.Kurz

[Cheatah]

Hi,

Gibt es einen besseren Weg, Graphiken transparent übereinander zu legen, als mit filter:alpha ?

ja - vor allem, weil CSS keine filter-Eigenschaft kennt, und Microsoft diese innerhalb des reservierten Namespaces erfunden hat. Man sollte filter auf jeden Fall vermeiden! (Wenn es wenigstens -ms-filter heißen würde ...)

Benutze die display- oder die visibility-Eigenschaft.

Cheatah

[MarkX]

Moin,

Benutze die display- oder die visibility-Eigenschaft.

hast ja recht, daß man filter auf jeden Fall vermeiden sollte. Aber ich denke display und visibility ist auch nicht ganz das was er sucht. Damit ist ja ein schrittweises Ein- und Ausblenden nicht möglich. Ich denke, falls diese Präsentation offline vorgeführt werden soll, dann ist HTML sicher ungeeignet. Besser wäre eine Präsentation mit Director oder Powerpoint oder was auch immer zu gestalten.

MfG
MarkX.

[Cheatah]

Hi,

hast ja recht, daß man filter auf jeden Fall vermeiden sollte. Aber ich denke display und visibility ist auch nicht ganz das was er sucht. Damit ist ja ein schrittweises Ein- und Ausblenden nicht möglich.

dann habe ich ihn falsch verstanden. So wie ich die Frage interpretiert habe, geht es nicht um schrittweises Überblenden, sondern um An- und Ausknipsen.

Cheatah

[MarkX]

Moin nochmal,

dann habe ich ihn falsch verstanden. So wie ich die Frage interpretiert habe, geht es nicht um schrittweises Überblenden, sondern um An- und Ausknipsen.

vielleicht ist ja Deine Interpretation der Frage richtig. Wie auch immer, wenn das ganze Online laufen soll wird er sich mit "An- und Ausknipsen" begnügen müssen.

MfG
MarkX.

[J. Kurz]

Hallo,

Danke für die bisherigen Antworten!

Ich suche etwas zum schrittweisen Überblenden, so wie MarkX es geschrieben hat.

Mit dem filter:alpha() geht das, nur leider ist das Ergebnis nicht so sehr zufriedenstellend.

Danke,
Jan

[Harry]

Holladiewaldfee,

Ich suche etwas zum schrittweisen Überblenden, so wie MarkX es geschrieben hat.

Prinzipiell suchst Du das opacity-Attribut aus CSS3, daß Du dann mit ein bißchen JS verändern kannst. Problematisch - das hast Du sicher schon erkannt - ist hier vor allem die "3" hinter dem "CSS". Mozilla ab 1.7b ist der einzige mir bekannte Browser, der damit umgehen kann.

Ich habe auf meiner Berg-Seite einen ähnlichen Fall, allerdings muß ich nichts überblenden sondern lege bloß ein Div halbtransparent über den Hintergrund. Ich mache das im Moment mit einer Dreifachlösung:

filter:alpha(opacity=25); -moz-opacity:0.25; opacity:0.25;

Damit wird mein Stylesheet zwar (leider) invalide, allerdings sind zumindest IE, Mozilla und alle zukünftigen Browser, die irgendwann mal das opacity-Attribut interpretieren, versorgt.

Wenn Du das jetzt mit JS überblenden willst, mußt Du mehr oder weniger eine vierfache Weiche einbauen:

• Für IE
• Für Mozilla
• Für CSS3-fähige Browser
• Für Browser, die nichts von dem können (heißer Kandidat: Opera, hab ich aber nicht probiert)

Letztere mußt Du mit einem einfachen visibility verarzten.
Allerdings solltest Du Dir gut überlegen, ob dieser doch eher billige Effekt den ganzen Aufwand rechtfertigt.

Ciao,

Harry

[siro]

Mahlzeit.

Ich hab einen Artikel gefunden, in dem sie den IE dazu bringen,
halbtransparente Bilder anzuzeigen,
allerdings funktioniert das wohl nicht mit dem IE 5.0.
http://www.alistapart.com/articles/cssdrop2/

MfG _Siro.