nicht angemeldet
Bilder exakt übereinander legen durch z-index
Hallo werte Userschaft,
Ich hab aktuell ein Problem, was mich mal wieder zur Verzweiflung treibt:
Ich will verschiedenen teiltransparente PNGs mit z-index so übereinander legen, dass diese ein neues Bild ergeben.
Beispiel: Eine Wiese, dann in einer neuen Ebene ein Fluss, und in einer weiteren Ebene ein Baum.
Alle Grafiken sollen 100*100px groß sein.
Bisher scheiter ich daran, dass in keiner Variation eines Quelltextes das PNG (hab es auch mit anderen Formaten getestet) angezeigt wird. Jetzt entwickeln sich folgende Fragen daraus:
1.) Kann mir jemand helfen, einen für 2 Ebenen funktionierenden Quellcode zu scripten?
2.) Kann man auch eine x-beliebige Anzahl an Ebenen damit produzieren?
3.) Gibt es eine Variante über PHP, vgl. Publicons.de, diese Bilder fertig zu generieren, sodass sie nur noch als fertige Grafik ausgegeben werden?
Freue mich über Antworten. :)
Mfg, MeTT
-
Hi there,
Dein Problem ist einfach mit einer Klasse zu lösen; definiere ein Klasse PNGBILD, der Du die CSS-Eigenschaften: position:absolute, top:X_wertpx;left:Y_wertpx;
dann gibst Du jedem Bild die Eigenschaft: class="PNGBILD"...
zB:
<img class="PNGBILD" src="bild1.png" ....>
<img class="PNGBILD" src="bild2.png" ....>
<img class="PNGBILD" src="bild3.png" ....>
<img class="PNGBILD" src="bild4.png" ....>etc...
3.) Gibt es eine Variante über PHP, vgl. Publicons.de, diese Bilder fertig zu generieren, sodass sie nur noch als fertige Grafik ausgegeben werden?
Möglich, wenn ich auch nicht weiss, wie Du die Transparenz reinbekommst, mit der GDLIB geht das imho nicht, aber vielleicht gibts ja eine neuere Version, die das kann, möglich auch, daß das imagemagik erledigt, das kenn ich einfach zu wenig...
-
Tach.
Gibt es eine Variante über PHP, vgl. Publicons.de, diese Bilder fertig zu generieren, sodass sie nur noch als fertige Grafik ausgegeben werden?
Ja, siehe dazu Image Functions im PHP-Handbuch. Für Transparenzeffekte interessante Funktionen tragen dort üblicherweise ein "alpha" im Namen.
Als Alternative kannst Du natürlich auch auf externe Module zurückgreifen, z. B. ImageMagick.
--
Once is a mistake, twice is Jazz.
-
Hi und danke erst mal für die Tipps,
Ich hab jetzt was gefrickelt, was zwar grundsätzlich funktioniert, aber leider noch nicht in Variation überzeugen kann.
Der Quelltext ist aktuell noch etwas unrein, die Class beim Image haben natürlich so keine Bestimmung. Ich hab es versucht, damit hinzubiegen, hat aber leider nicht geklappt, vermutlich hab ich die Class nicht richtig definiert. Hier jetzt die Version, die voerst klappt:
<style type="text/css">
.examplediv
{
}
#divid
{
position:absolute;
left:111px; top:131px;
}</style>
<body>
<div id="divid" class="examplediv">
<img class="png" src="http://img119.imageshack.us/img119/7978/plnnb7.png" >
</div><div id="divid" class="examplediv">
<img class="png" src="http://img530.imageshack.us/img530/2396/lay1ys8.png" >
</div><div id="divid" class="examplediv">
<img class="png" src="http://img530.imageshack.us/img530/2488/wall1gb3.png" >
</div>Hier zum anklicken und angucken:
http://mettness.atspace.com/upload.htmlWie daraus hervorgeht, handelt es sich um Felder für ein Browsergame. Daraus soll jetzt Zelle für Zelle eine Karte gebastelt werden, aber sobald ich versuche, zwei Felder untereinander anzuordnen, indem ich ein zweites divid definiere, trennen sich die Bilder von einander und ich habe letzten Endes 6 Bilder die untereinander angeordnet sind (Ausnahme: Mein Phase 5.3, allerdings ignoriert der die Transparenz von PNGs ;) ). Ich würde mich freuen, wenn mir jemand sagen kann, wie ich diesen Teilerfolg auf ein größeres Gebiet umwandeln kann.
Mfg, MeTT
-
Hi there,
<body>
<div id="divid" class="examplediv">
<img class="png" src="http://img119.imageshack.us/img119/7978/plnnb7.png" >
</div><div id="divid" class="examplediv">
<img class="png" src="http://img530.imageshack.us/img530/2396/lay1ys8.png" >
</div><div id="divid" class="examplediv">
<img class="png" src="http://img530.imageshack.us/img530/2488/wall1gb3.png" >
</div>Mir fallen zwei nicht unproblematische Dinge auf; erstens vergibst Du Deinen divs immer die gleiche id, das ist ein schwerwiegender Fehler und zweitens, wozu sind die divs überhaupt gut? Vergib die Klasseneigenschaft doch den Bildern selbst und nicht den divs. also aus
.examplediv
{
}
#divid
{
position:absolute;
left:111px; top:131px;}
machst Du
.examplediv
{
position:absolute;
left:111px; top:131px;}
und schreibst die Klasse direkt in die imagetags.
Wie daraus hervorgeht, handelt es sich um Felder für ein Browsergame. Daraus soll jetzt Zelle für Zelle eine Karte gebastelt werden, aber sobald ich versuche, zwei Felder untereinander anzuordnen, indem ich ein zweites divid definiere, trennen sich die Bilder von einander und ich habe letzten Endes 6 Bilder die untereinander angeordnet sind (Ausnahme: Mein Phase 5.3, allerdings ignoriert der die Transparenz von PNGs ;) ). Ich würde mich freuen, wenn mir jemand sagen kann, wie ich diesen Teilerfolg auf ein größeres Gebiet umwandeln kann.
ich verstehe Dein Problem nicht ganz, in meinem Browser sind die Bilder übereinander, im IE siehts nur etwas anders aus, aber das ist eh bekannt, daß der IE (6) Probleme mit teiltransparenten PNGs hat. Wahrscheinlich rendert irgendeine Vorschau im Phase 5 mit dem IE. Das ist ein fundamentales Problem, das wirst Du für diesen Browser nicht lösen können...
-
Huhu & ein weiteres Danke! :)
Jetzt klappt die Darstellung mit mehreren Feldern zum Teil, aber es hat sich, damit es spannend bleibt, etwas seltsames ergeben:
http://mettness.atspace.com/viele.html ( http://phpfi.com/306692 )
Unter Firefox ignorieren die oberen beiden Felder der zweiten und dritten Spalte die css Anweisung. Unter meiner IE Version klappt die Anordnung fehlerlos. Muss ich davon ausgehen, dass es wirklich ein Bug im Firefox ist? Laut Quelltext sind die beiden Spalten bis auf die class identisch. Wenn es nicht am Quelltext liegt, kann mir jemand eine mögliche Alternative dazu liefern, damit es trotzdem funktioniert?
Mfg, MeTT
-
Hi,
Jetzt klappt die Darstellung mit mehreren Feldern zum Teil, aber es hat sich, damit es spannend bleibt, etwas seltsames ergeben:
http://mettness.atspace.com/viele.html ( http://phpfi.com/306692 )
Unter Firefox ignorieren die oberen beiden Felder der zweiten und dritten Spalte die css Anweisung. Unter meiner IE Version klappt die Anordnung fehlerlos. Muss ich davon ausgehen, dass es wirklich ein Bug im Firefox ist?
Ist das dein Aprilscherz, bei absolut unvollstaendigem und damit fehlerhaftem HTML-Dokument den Fehler dem Browser zuschieben zu wollen?
Erstelle ein vollstaendiges, valides HTML-Dokument - *dann* kann man sich anschliessend ggf. damit beschaeftigen, nach der Ursache von Darstellungsfehlern zu suchen.
MfG ChrisB
-
Hi there,
Unter Firefox ignorieren die oberen beiden Felder der zweiten und dritten Spalte die css Anweisung.
Das hat damit zu tun, das <!-- und --> innerhalb der Styledefinitionsanweisung *keine* Kommentare darstellen. Wenn Du zwischen <style> und </style> etwas kommentieren möchtest, dann mußt Du das mit /* und */ machen...
-
Hi there,
Unter Firefox ignorieren die oberen beiden Felder der zweiten und dritten Spalte die css Anweisung.
Das hat damit zu tun, das <!-- und --> innerhalb der Styledefinitionsanweisung *keine* Kommentare darstellen. Wenn Du zwischen <style> und </style> etwas kommentieren möchtest, dann mußt Du das mit /* und */ machen...
Juhu, danke, es klappt. :)
Hier mal das "erste" Ergebnis (später soll das mit einer Eingabemaske erleichtert werden, die Karte jetzt ist komplett Handarbeit):
http://www.julian-breuer.de/1337/fuell.html
An ChrisB: Ja, du hast Recht, war nicht sehr klug. Da es in der heutigen Zeit damit seltener Probleme gibt, hab ich das übergangen.
Danke noch mal für alles!
Mfg, MeTT
-
Hier mal das "erste" Ergebnis (später soll das mit einer Eingabemaske erleichtert werden, die Karte jetzt ist komplett Handarbeit):
http://www.julian-breuer.de/1337/fuell.html
Abgefahrener Bildaufbau, sowas hab ich noch auf keiner Website gesehen... :-)
-
-
-
-
-
-
-
Hallo werte Userschaft,
Hallo werter User!
Ich hab aktuell ein Problem, was mich mal wieder zur Verzweiflung treibt:
Kein Wunder findest Du die Lösung nicht! Verzweiflung behindert das logische Denkvermögen...
Ich will verschiedenen teiltransparente PNGs mit z-index so übereinander legen, dass diese ein neues Bild ergeben.
Beispiel: Eine Wiese, dann in einer neuen Ebene ein Fluss, und in einer weiteren Ebene ein Baum.
Alle Grafiken sollen 100*100px groß sein.Bisher scheiter ich daran, dass in keiner Variation eines Quelltextes das PNG (hab es auch mit anderen Formaten getestet) angezeigt wird. Jetzt entwickeln sich folgende Fragen daraus:
1.) Kann mir jemand helfen, einen für 2 Ebenen funktionierenden Quellcode zu scripten?
Hier mal ein Denkanstoß: In Mozilla-Browsern gibt es die JavaScript-Funktion window.getComputedStyle(). Eine kurze Beschreibung findest Du auf
http://developer.mozilla.org/en/docs/DOM:window.getComputedStyleDiese Funktion könntest Du in einem JavaScript-Bereich verwenden, um die vom Browser berechnete Position des Bilds in der ersten Ebene dem Bild in der zweiten Ebene zuzuweisen.
2.) Kann man auch eine x-beliebige Anzahl an Ebenen damit produzieren?
Wenn Du mit der o. g. JavaScript-Funktion tatsächlich glücklich wirst, dann dürftest Du problemlos weitere Ebenen damit produzieren können. (Hast Du die berechnete Position des ersten Bildes erstmal in Variablen ausgelesen, kannst Du diese Werte ja beliebig weiteren Bildern zuweisen.)
3.) Gibt es eine Variante über PHP, vgl. Publicons.de, diese Bilder fertig zu generieren, sodass sie nur noch als fertige Grafik ausgegeben werden?
Es gibt ja (nachzulesen auf http://de3.php.net/image) in PHP mehrere Funktionen zum dynamischen Erzeugen von Bildern, aber bevor Du diese im Produktivumfeld einsetzt, solltest Du mal schauen, ob bspw. die Funktion imagecreatefromgif() so tut, wie sie dort beschrieben ist. Wenn nicht, hast Du das gleiche Problem wie ich. Mein Webhoster (1&1) hat nämlich bei meinem Tarif (Home 5.0) dem PHP-Modul zu wenig Arbeitsspeicher zugewiesen, so dass die meisten Funktionen der PHP-Grafikbibliothek GDlib nur eingeschränkt oder überhaupt nicht funktionieren.
Eine schnelle und unkomplizierte Möglichkeit, das zu testen, ist folgende:
1. Du gehst zu http://www.bitfolge.de/snif und lädst Dir die dort angebotene index.php runter.
2. Du lädst diese index.php in ein Bilderverzeichnis auf Deinem Webserver hoch und rufst dieses im Browser auf.
3. Die index.php sollte dann in der ganz rechten Spalte ("Beschreibung" oder "Description") für jedes Bild ein Thumbnail erzeugen. Falls Du dort keine Thumbnails siehst, hast Du das gleiche Problem wie ich. ("Error 4711 - Geiziger Webhoster" ;-)