1. #1
    Avatar von Sky.NET
    Registriert seit
    26.11.2011
    Beiträge
    2.462
    Thanked 2.717 Times in 1.286 Posts
    Blog Entries
    7

    Standard Bilderformatierung

    Hier wird das Bild formatiert:

    Beispiele:

    1. sm_handyB_02.b.h_25.gif
    2. sm_pokertour_shufflecards...b.my_2.h_35.w_71.gif
    3. sm_bedsheetsC_starlite-ani...b.my_1.w_0.mx_-90.h_30.gif
    4. sm_abo_11-08_bouquetofroses-ani...b.w_0.h_31.mx_-54.my_7.gif
    5. sm_abo_11-04_lovesignal-bg...b.my_7.w_65.mx_-2.h_25.png
    6. sm_fairytale_hanselandgretel...b.my_8.h_70.w_70.mx _-5.gif
    7. sm_abo_11-11_xmas-boot...b.h_40.w_44.mx_-1.my_1.gif

    Nach Entfernen der Bildnamen und Dateiendungen:

    1. b.h_25
    2. ..b.my_2.h_35.w_71
    3. ..b.my_1.w_0.mx_-90.h_30
    4. ..b.w_0.h_31.mx_-54.my_7
    5. ..b.my_7.w_65.mx_-2.h_25
    6. ..b.my_8.h_70.w_70.mx_-5
    7. ..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:
    Zitat Zitat von Hydra Beitrag anzeigen
    Hier (in Deutschland) kann man keine andere tolle Aktivitäten machen, als zu chillen, shoppen, saufen und Partys feiern xD Ich habe nichts gegen ab und zu mal saufen und Partys feiern, aber das ist doch nicht wirklich das wahre Leben o_o
    Wieso das Internet für die meisten Leute gefährlich ist:
    Zitat Zitat von Silent Beitrag anzeigen
    Ich weiß ja nicht was der Sinn dahinter steckt es heißt immer "security reasons".

  2. #2

    Registriert seit
    02.11.2011
    Beiträge
    54
    Thanked 26 Times in 20 Posts

    Standard Bilderformatierung

    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 ^^

    Desto mehr ihr euch aufregt, desto mehr Spaß hab ich dran :-3

  3. #3

    Registriert seit
    01.07.2011
    Beiträge
    103
    Thanked 54 Times in 45 Posts

    Standard Bilderformatierung

    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.


  4. #4
    Avatar von Sky.NET
    Registriert seit
    26.11.2011
    Beiträge
    2.462
    Thanked 2.717 Times in 1.286 Posts
    Blog Entries
    7

    Standard 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:
    Zitat Zitat von Hydra Beitrag anzeigen
    Hier (in Deutschland) kann man keine andere tolle Aktivitäten machen, als zu chillen, shoppen, saufen und Partys feiern xD Ich habe nichts gegen ab und zu mal saufen und Partys feiern, aber das ist doch nicht wirklich das wahre Leben o_o
    Wieso das Internet für die meisten Leute gefährlich ist:
    Zitat Zitat von Silent Beitrag anzeigen
    Ich weiß ja nicht was der Sinn dahinter steckt es heißt immer "security reasons".

  5. #5

    Registriert seit
    05.04.2012
    Beiträge
    19
    Thanked 0 Times in 0 Posts

    Standard Bilderformatierung

    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 
    Den margin-top Wert immer so anpassen, dass der Wert "Bildhöhe -17 Pixel für die Zeilenhöhe" entspricht. Ändert sich die Zeilenhöhe (durch andere Schriftart oder Schriftgröße), so muss man den Wert leider immer entsprechend anpassen.
    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)

  6. #6

    Registriert seit
    01.07.2011
    Beiträge
    103
    Thanked 54 Times in 45 Posts

    Standard Bilderformatierung

    Wie wärs mit einer Absoluten Positionierung des Bild-Elementes (Nicht der Container), dann sollte des doch funktionieren - Egal ob Inline- oder Blockelement.

  7. #7
    Avatar von Sky.NET
    Registriert seit
    26.11.2011
    Beiträge
    2.462
    Thanked 2.717 Times in 1.286 Posts
    Blog Entries
    7

    Standard 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:
    Zitat Zitat von Hydra Beitrag anzeigen
    Hier (in Deutschland) kann man keine andere tolle Aktivitäten machen, als zu chillen, shoppen, saufen und Partys feiern xD Ich habe nichts gegen ab und zu mal saufen und Partys feiern, aber das ist doch nicht wirklich das wahre Leben o_o
    Wieso das Internet für die meisten Leute gefährlich ist:
    Zitat Zitat von Silent Beitrag anzeigen
    Ich weiß ja nicht was der Sinn dahinter steckt es heißt immer "security reasons".

  8. #8

    Registriert seit
    05.04.2012
    Beiträge
    19
    Thanked 0 Times in 0 Posts

    Standard Bilderformatierung

    Zitat Zitat von Batzi Beitrag anzeigen
    Wie wärs mit einer Absoluten Positionierung des Bild-Elementes (Nicht der Container), dann sollte des doch funktionieren - Egal ob Inline- oder Blockelement.
    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>
    also span (oder sonstwas) mit der absoluten Position um das Bild ... das Bild selbst mit relativer Position und dann das ganze nach oben um die Hälfte von der Bildhöhe verschieben
    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

  1. Bilderformatierung
    Von Sky.NET im Forum Protokoll
    Antworten: 0
    Letzter Beitrag: 18.12.2011, 15:23
Diese Seite nutzt Cookies, um das Nutzererlebnis zu verbessern. Klicken Sie hier, um das Cookie-Tracking zu deaktivieren.