Thema: Bilderformatierung
-
18.12.2011, 15:17 #1
Bilderformatierung
Hier wird das Bild formatiert:
Beispiele:
- sm_handyB_02.b.h_25.gif
- sm_pokertour_shufflecards...b.my_2.h_35.w_71.gif
- sm_bedsheetsC_starlite-ani...b.my_1.w_0.mx_-90.h_30.gif
- sm_abo_11-08_bouquetofroses-ani...b.w_0.h_31.mx_-54.my_7.gif
- sm_abo_11-04_lovesignal-bg...b.my_7.w_65.mx_-2.h_25.png
- sm_fairytale_hanselandgretel...b.my_8.h_70.w_70.mx _-5.gif
- sm_abo_11-11_xmas-boot...b.h_40.w_44.mx_-1.my_1.gif
Nach Entfernen der Bildnamen und Dateiendungen:
- b.h_25
- ..b.my_2.h_35.w_71
- ..b.my_1.w_0.mx_-90.h_30
- ..b.w_0.h_31.mx_-54.my_7
- ..b.my_7.w_65.mx_-2.h_25
- ..b.my_8.h_70.w_70.mx_-5
- ..b.h_40.w_44.mx_-1.my_1
Auflösung:
- .. = ? (siehe b)
- b = ? (eventuell nur einleitung des bildformats)
- my = margin-y
- mx = margin-x
- w = width
- h = height
- . = trennzeichen
Wwenn w 0 ist, dann ist w = der breite des vorigen Bildes (Hintergrundbild bei Doublepics)
Der Datentyp sollte Dictionary bzw. Hashtable sein, also Zugriff auf die Daten mittels
img.marginX = imgFormat['mx'];
Bei Ergänzungen und Fragen könnt ihr hier gern posten...Java:
Spoiler:
Lustige Quotes:
Spoiler:
-
25.02.2012, 06:47 #2
- Registriert seit
- 02.11.2011
- Beiträge
- 54
Thanked 26 Times in 20 PostsBilderformatierung
Hätte ja gesagt, dass "..." das Trennzeichen zwischen dem Namen und den Properties ... aber irgendwie fehlt das ganze ja beim ersten.
Heisst man muss nach "gut glück" vorgehen, den ganzen string spliten und die Anfangsbuchstaben checken ... super ^^
-
25.06.2012, 01:57 #3
- Registriert seit
- 01.07.2011
- Beiträge
- 103
Thanked 54 Times in 45 PostsBilderformatierung
Hier mal einige Parameter.
Wie schon richtig erkennt, werden bei Bild-Argumenten vorher nach dem Bildnamen ".." gesetzt. Alle Parameter fangen mit einem Punkt an.
Beispiel (Ohne Parameter):
Bildname.png
Beispiel (Mit Parameter):
Bildname...PARAM.png
Folgende Parameter hab ich bereits gefunden:
h_(int) - Setzt die Höhe (Height)
w_(int) - Setzt die Breite (Width)
quadcut_(int) - Cuttet das Bild mit angabe der größe
border_(int) - Setzt eine Umrandung um das Bild (Border)
shadow_(int) - Setzt ein Schatten (Shadow)
b - Setzt das Bild aut Obere Ausrichtung (Vertical-Align Top)
mx_(int) - Margin-X
my_(int) - Margin-Y
Einige Parameter (beispielsweise Shadow) können mehrfach angewendet werden.
Und so könnte des ganze dann aussehen:
Bildname...w_200.quadcut_200.border_2.shadow_4.png
@Vorposter
Ich weiß nicht, warum dort die Angabe der parameter-Einleitung fehlt. Kann es ggf. sein, dass dies der richtige Bildname ist?
Denn wenn ich es direkt aufrufe, finde ich das Bild.
BILD ANZEIGEN [Warum wird das Bild nicht angezeigt?] Wenn ich aber die "Parameter" versuche zu verändern, so bekomme ich ein 404er. Sprich, wenn wirklich Parameter angegeben werden, so erkennt man dies anhand der drei Punkte. Ansonsten ist es halt der normale Bildname.
-
23.07.2012, 23:51 #4
Bilderformatierung
Kleiner aber extrem wichtiger Hinweis:
Diese Parameter beziehen sich NICHT direkt auf die Bilder!
Sie beziehen sich auf die Container, in denen sich die Bilder befinden!
Wenn ihr die Bilder nach den Werten resized bekommt ihr nur Smileymatsche...
Dh. es geht hier explizit darum, Smileys aus Zeilen herausragen zu lassen, wie wir das zb. von dem mit der Taschenlampe (lovelight oder so) und Frau Holle kennen.
Bei diesen beiden Smileys zb. sind die Bildcontainer klein gehalten, damit der Rest von dem Bild die Zeile nicht vergrößert, sondern in die umgebenden Zeilen hineinragt.
Das könnte man in HTML wie folgt darstellen:
[highlight=php]
<div style="display:inline; overflow:visible; margin-top:17px; max-width:74px; max-height:40px;">
<img
src="http://chat.knuddels.de/pics/sm_abo_fusion-deusiratus-ani.gif"
style="background:url(http://chat.knuddels.de/pics/sm_abo_...siratus-bg.png) no-repeat;"
>
</div>
[/highlight]
Soweit die Theorie und vom logischen her ist das auch richtig, leider wird das so vom Browser mit einem 'Arschlecken, mach ich nicht!' quittiert und die Zeile wird trotzdem vergrößert... denn die max-parameter gelten nur für blockelemente, welches das div ja nicht mehr ist sobald ich es als 'inline' deklariert habe...
Einen Workarround habe ich noch nicht gefunden, bin aber gerade dabei...
Da sich sowieso Niemand hier mit JS/HTML/CSS beschäftigt erwarte ich kein Feedback zu diesem Hinweis, wenn doch einer kommt, auch gut.Java:
Spoiler:
Lustige Quotes:
Spoiler:
-
26.07.2012, 13:30 #5
- Registriert seit
- 05.04.2012
- Beiträge
- 19
Thanked 0 Times in 0 PostsBilderformatierung
Das stimmt so nicht ganz, wen du beispielsweise mal ne border um das div ziehst siehst du, dass das div selbst nicht so groß ist wie das Bild.
Leider hab ich auf die schnell keine ordentlich umgesetzte Möglichkeit gefunden, so geht es aber bei Verdana Schriftgröße 16:
PHP-Code:zeile drüber skafdjlkasfj flskdafj lskdajsda lksdafj kal
<div style="margin-top:-45px;">
Text in der Zeile davor
<img
src="http://chat.knuddels.de/pics/sm_abo_fusion-deusiratus-ani.gif"
style="background:url(http://chat.knuddels.de/pics/sm_abo_fusion-deusiratus-bg.png) no-repeat;">
Text in der Zeile danach
</div>I text zeile drunter asfdjlkaslkdsafj salfksdaj flksdafjlskda fsdjalk
Ist evtl. keine optimale Lösung, wie gesagt auf die Schnelle hab ich jetzt nix anderes herausgefunden
Im Endeffekt muss man es also mit meiner "Methode" immer an Schriftart und Größe anpassen ... natürlich keine coole Lösung ^^ (N)
-
26.07.2012, 14:11 #6
- Registriert seit
- 01.07.2011
- Beiträge
- 103
Thanked 54 Times in 45 PostsBilderformatierung
Wie wärs mit einer Absoluten Positionierung des Bild-Elementes (Nicht der Container), dann sollte des doch funktionieren - Egal ob Inline- oder Blockelement.
-
26.07.2012, 14:38 #7
Bilderformatierung
@iron
darum geht es ja, der container MUSS kleiner sein als das bild damit die zeile nicht vergrössert sondern das bild in die umliegenden elemente hineinragt.
@batzi
daran habe ich noch nicht gedacht, werde ich nachher mal ausprobieren.Java:
Spoiler:
Lustige Quotes:
Spoiler:
-
27.07.2012, 00:30 #8
- Registriert seit
- 05.04.2012
- Beiträge
- 19
Thanked 0 Times in 0 PostsBilderformatierung
das geht zwar mit der Zeilenhöhe, aber das Bild ist dann irgendwie nicht so ganz cool platziert.
Damit geht's aber:
HTML-Code:<div style="display:inline-block; overflow:visible;"> <span style="position:absolute;"><img src="http://chat.knuddels.de/pics/sm_abo_fusion-deusiratus-ani.gif" style="background:url(http://chat.knuddels.de/pics/sm_abo_fusion-deusiratus-bg.png) no-repeat;position:relative;top:-31px;" ></span> </div>
im div kann man frei zwischen inline und inline-block wählen. Das Bild verrutscht dann in der Höhe ein wenig. ich weiß leider ned was davon die richtige Position ist kenne den Smiley dazu gar nicht ^^
Ähnliche Themen
-
Bilderformatierung
Von Sky.NET im Forum ProtokollAntworten: 0Letzter Beitrag: 18.12.2011, 15:23
Diese Seite nutzt Cookies, um das Nutzererlebnis zu verbessern. Klicken Sie hier, um das Cookie-Tracking zu deaktivieren.