nicht angemeldet
Bild 1 „durchleuchten“ um Bild 2 zu sehen.
0 
Matthias Apsel
0
Bild 1 „durchleuchten“ um Bild 2 zu sehen.
Hallo zusammen,
ich möchte mit Hilfe von HTML/CSS zwei Bilder übereinander legen.
Jetzt ergibt sich folgende Problemstellung: Das Bild dass oben liegt (dass zu sehen ist) soll per Mauszeiger „durchleuchtet“ werden.
Sobald ich mit dem Mauszeiger darüber gehe, möchte ich durch das oben liegende Bild durchschauen können. Vielleicht ein Kreis der ein Loch bildet, um das Bild unten zu sehen.
Gibt es hierfür ein JavaScript/jQuery oder vielleicht sogar eine HTML/CSS Lösung?
Beste Grüße und vielen Dank für die Hilfe!
-
-
Ein guter Ansatz. Ich komme aber nicht zu dem Ergebnis, dass das obere Bild durchsichtig wird.
Wenn ich z.B. ein dritten Layer über beide Bilder lege und diesen mit opacity versehe, erhalte ich kein „Röntgen“-Effekt. Nur der Layer 3 an und für sich wird transparent. Nicht jedoch Bild 2.
Wie kann ich opacity stellenweise auf Bild 2 anwenden? Ohne das gleich das ganze Bild durchsichtig wird?
Om nah hoo pez nyeetz, Sven!
opacity ist dein Freund.
Matthias
-
Hi,
Wenn ich z.B. ein dritten Layer über beide Bilder lege und diesen mit opacity versehe, erhalte ich kein „Röntgen“-Effekt. Nur der Layer 3 an und für sich wird transparent. Nicht jedoch Bild 2.
Wie kann ich opacity stellenweise auf Bild 2 anwenden? Ohne das gleich das ganze Bild durchsichtig wird?
Direkt: Gar nicht.
Indirekt: Indem du ein kleines Element über dem oberen Bild platzierst, und diesem das untere Bild als (passend positioniertes) Hintergrundbild verpasst. Damit hättest du zunächst eine rechteckige Form – mittels border-radius solltest du die auch noch rund bekommen. Bewegung dieses „Ausschnittes“ dann per JavaScript realisieren.
Das ergäbe dann optisch erst mal einfach nur ein „Loch“ im oberen Bild, durch das man glatt hindurchschauen und das untere sehen kann. Wenn du dem Element jetzt noch opacity mitgibst, sollte sich auch ein Effekt erreichen lassen, der aussieht als ob in Wirklichkeit das obere Bild an der Stelle teiltransparent wäre.Wenn du mehr willst – keine gleichförmige Transparenz, sondern einen Verlauf o.ä. – dann wirst du „schwerere Geschütze“ auffahren müssen, bspw. Flash oder Canvas.
MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?-
Hi,
Indirekt: […]
Beispiel dafür, mit zwei kurz von SPON „entliehenen“ Bildern (Fussballerfratze, Kapitalistenfratze):
http://jsfiddle.net/DaCMR/ - Ribéry aus dem unteren Bild kreisrund und mit 65% Opacity „über“ Ackermann platziert.
Getestet mit Firefox und Opera, sollte in anderen aktuellen Browsern ebenso funktionieren.
Bewegung des Kreises/Anpassung der nötigen Eigenschaften (Position des Hintergrundbildes) mit JavaScript: Deine Aufgabe.
MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?-
Vielen Dank für die Antworten!
Vielen Dank für den Code, ChrisB!Ich dachte HTML5/CSS4 sei so mächtig? :-)
Am Anfang ging ich noch davon aus, dass JavaScript nur ein kleiner Teil des ganzen Codes sein wird. Aber um eine gewisse Funktionalität zu schaffen ist mehr JavaScript als HTML notwendig.Wahrscheinlich ist Flash hier noch ergiebiger.
Aber Danke nochmals für das schnelle Beispiel! Sehr fit in Sachen scripten :-)
Viele Grüße!
Hi,
Indirekt: […]
Beispiel dafür, mit zwei kurz von SPON „entliehenen“ Bildern (Fussballerfratze, Kapitalistenfratze):
http://jsfiddle.net/DaCMR/ - Ribéry aus dem unteren Bild kreisrund und mit 65% Opacity „über“ Ackermann platziert.
Getestet mit Firefox und Opera, sollte in anderen aktuellen Browsern ebenso funktionieren.
Bewegung des Kreises/Anpassung der nötigen Eigenschaften (Position des Hintergrundbildes) mit JavaScript: Deine Aufgabe.
MfG ChrisB
-
Ich dachte HTML5/CSS4 sei so mächtig? :-)
CSS4?
Mit CSS3 und JavaScript ist dein Vorhaben auch nicht schwierig umzusetzen - das hat ChrisB ja einfach gezeigt:
Du musst das Element nur den Mauscursor verfolgen lassen - das Element ist so breit wie der Durchmesser deiners "Lochs" und hat einen border-radius in höhe des Radius.
Je nach Cursorposition über dem Bild verschiebst du das Hintergrundbild des "Lochs" in exakt die Gegenrichtung - das sieht dann so aus, als könntest du durchsehen.
Am Anfang ging ich noch davon aus, dass JavaScript nur ein kleiner Teil des ganzen Codes sein wird. Aber um eine gewisse Funktionalität zu schaffen ist mehr JavaScript als HTML notwendig.
Das ist in keinem Fall anders - HTML stellt de facto keine Funktionalität zur verfügung, dafür ist JavaScript und bedingt mittlerweile auch CSS3 zuständig (wenn man jetzt von Formularen usw absieht).
Wenn du den Ansatz von ChrisB weiterverfolgst, hast du am Ende vermutlich keine 10 Zeilen JavaScript (ein Framework schadet hier nicht).
Wahrscheinlich ist Flash hier noch ergiebiger.
Scherzkeks - ob du das mit JavaScript oder ActionScript schreibst ist vom Code her ziemlich egal :)
-
Wenn du den Ansatz von ChrisB weiterverfolgst, hast du am Ende vermutlich keine 10 Zeilen JavaScript (ein Framework schadet hier nicht).
7 Zeilen so weit - den Rest darfst du selbst machen :p
-
-
-
-
-
Hi there,
Wenn ich z.B. ein dritten Layer über beide Bilder lege und diesen mit opacity versehe, erhalte ich kein „Röntgen“-Effekt. Nur der Layer 3 an und für sich wird transparent. Nicht jedoch Bild 2.
Opacity ist ja auch kein Röntgeneffekt sondern wirkt nur auf das Objekt, dem Du die opacity-Eigenschaft wertmäßig zuweist.
Wie kann ich opacity stellenweise auf Bild 2 anwenden?
Stellenweise ist ein bisschen unspezifisch. Wenn die Transparenz irgendwelchen Konturen oder ähnlichem IM Bild folgen soll, dann kommst Du mit Opacity nicht weiter, dann ist es besser mit dem Bildformat PNG und Alphatransparenz zu arbeiten.
Wenn "stellenweise" transparente oder "transparentere" Stellen in Rechteckformat bedeutet, dann kommst Du mit der Clip-Eigenschaft und einer zweiten Kopie des Bildes weiter... -
Wie kann ich opacity stellenweise auf Bild 2 anwenden? Ohne das gleich das ganze Bild durchsichtig wird?
Mit drei Bildern geht es. Das oberste Bild wird durchsichtig, das mittlere Bild entspricht dem oberen hat aber den gewünschten durchsichtigen Bereich durch den man das unterste Bild sieht.
-
Wie kann ich opacity stellenweise auf Bild 2 anwenden? Ohne das gleich das ganze Bild durchsichtig wird?
Mit drei Bildern geht es. Das oberste Bild wird durchsichtig, das mittlere Bild entspricht dem oberen hat aber den gewünschten durchsichtigen Bereich durch den man das unterste Bild sieht.
Oder das untere von zwei Bildern sieht für sich schon so aus, als würde man durch das obere durchsehen können, dann sind es nur zwei Bilder (ggf. + einer vollständigen Downlodversion des unteren Bildes).
-
-
-
-
Hallo Sven,
ist es das, was Du suchst:
Stempeltempel - Blick hinter die Kulisse
Gruß
RAFich möchte mit Hilfe von HTML/CSS zwei Bilder übereinander legen.
Jetzt ergibt sich folgende Problemstellung: Das Bild dass oben liegt (dass zu sehen ist) soll per Mauszeiger „durchleuchtet“ werden.Sobald ich mit dem Mauszeiger darüber gehe, möchte ich durch das oben liegende Bild durchschauen können. Vielleicht ein Kreis der ein Loch bildet, um das Bild unten zu sehen.
