paul: Bilder mit mehr als 4 Ecken

Moin,
Hintergrund: ich habe ein Bild welches einen transparenten Hintergrund hat. Für das Bild habe ich float:left angegeben. Dadurch wird der Text schön um das Bild herum geschrieben. So weit, so gut. Nun ist der transparente Hintergund allerdings in einigen Bereichen des Bildes sehr groß.
Frage: Gibt es eine Möglichkeit das rechteckige Bild in ein Polygon zu konvertieren? Natürlich ist das dann kein Bild mehr sondern ... was anderes.

Paul

  1. Hallo,

    Hintergrund: ich habe ein Bild welches einen transparenten Hintergrund hat. Für das Bild habe ich float:left angegeben. Dadurch wird der Text schön um das Bild herum geschrieben. So weit, so gut. Nun ist der transparente Hintergund allerdings in einigen Bereichen des Bildes sehr groß.

    ... und nun möchtest du, dass der Text nicht die Außenkanten des Bildes umfließt, sondern die Konturen des Motivs? - Das geht so nicht.

    Ich habe allerdings schon ab und zu als Behelfslösung (auf neudeutsch: Workaround) gesehen, dass das Bild in Streifen zerlegt wurde, jeder Streifen nur wenig breiter als das eigentliche Motiv. Das ist ein ziemlicher Aufwand, aber wenn's einem der Effekt wert ist ...

    So long,
     Martin

    --
    Es existiert kein Weg, "für" etwas zu optimieren, sondern nur gegen alles andere.
      (Cheatah)
    1. Hallo,

      ... und nun möchtest du, dass der Text nicht die Außenkanten des Bildes umfließt, sondern die Konturen des Motivs? - Das geht so nicht.

      Ich habe allerdings schon ab und zu als Behelfslösung (auf neudeutsch: Workaround) gesehen, dass das Bild in Streifen zerlegt wurde, jeder Streifen nur wenig breiter als das eigentliche Motiv. Das ist ein ziemlicher Aufwand, aber wenn's einem der Effekt wert ist ...

      Ich denke, das Bild kann ganz bleiben. Man muss es nur absolut positionieren (damit der folgende Text das Bild überschreibt) und dann leere Blockelemente definieren, um die der Text herumfließt.

      LG Kalle

      1. ... Man muss es nur absolut positionieren (damit der folgende Text das Bild überschreibt)

        Oder margin-bottom des Bildes negativ setzen, ist wohl noch einfacher.

        1. ... Man muss es nur absolut positionieren (damit der folgende Text das Bild überschreibt)

          Oder margin-bottom des Bildes negativ setzen, ist wohl noch einfacher.

          Was? Verstehe nur Bahnhof...

          1. Hi paul,
            falls du des Englischen einigermaßen mächtig bist und dir PHP zur Verfügung steht, könnte dieser Artikel dir evtl. eine Hilfe sein: Sliced and Diced Sandbags.

            cheers
            Antipitch

            1. Ja, sehr schön.
              Allerdings etwas zu überdimensioniert für meine Bedürfnisse. Aber sehr interessant für weitere stylische Aktivitäten.

              Paul

      2. Ich denke, das Bild kann ganz bleiben. Man muss es nur absolut positionieren (damit der folgende Text das Bild überschreibt) und dann leere Blockelemente definieren, um die der Text herumfließt.

        Hmmm - beim nochmaligen Nachdenken ... Wenn ich Blockelemente mit float aneinanderreihe, belegen sie den Platz, den eigentlich der Text haben soll. Wie bekomme ich Blockelemente untereinander, den Fließtext aber daneben?

        LG Kalle

    2. Hi,

      Ich habe allerdings schon ab und zu als Behelfslösung (auf neudeutsch: Workaround) gesehen, dass das Bild in Streifen zerlegt wurde, jeder Streifen nur wenig breiter als das eigentliche Motiv. Das ist ein ziemlicher Aufwand, aber wenn's einem der Effekt wert ist ...

      Mit Gimp geht das relativ einfach, wenn Du regelmäßige horizontale Hilfslinien ziehst und mit dem Werkzeug Guillotine das Bild schnipselst, brauchst Du nur noch die Streifen, die zu breit sind, verschmalern.

      Gruß, LX

      --
      RFC 1925, Satz 8: Es ist komplizierter als man denkt.
      1. Mit Gimp geht das relativ einfach, wenn Du regelmäßige horizontale Hilfslinien ziehst und mit dem Werkzeug Guillotine das Bild schnipselst, brauchst Du nur noch die Streifen, die zu breit sind, verschmalern.

        Das hört sich gut an. Habe aber gerade auf die Schnelle keine Hilfslinien erzeugen können. Wie macht man das (oder muss man die per Hand reinmalen)?

        1. Hi!

          Das hört sich gut an. Habe aber gerade auf die Schnelle keine Hilfslinien erzeugen können. Wie macht man das (oder muss man die per Hand reinmalen)?

          Du ziehst sie vom Seitenlineal dorthin, wo Du sie haben willst.

          Dummerweise hat mein siebaehnliches Gedaechtnis mal wieder verschlampt, wo ich grad neulich eine Loesung fuer genau so ein Problem gefunden hatte. Sonst wuerde ich Dir von der Bildmisshandlung abraten.

          Ich bilde mir allerdings ein, dass ein Website Baker Template genau so ein Feature hatte. Da kann ich allerdings grad nicht nach suchen.

          --
          "Die Diebesgilde beklagte sich darueber, dass Mumm in aller Oeffentlichkeit behauptet hatte, hinter den meisten Diebstaehlen steckten Diebe."
                - T. Pratchett
        2. Entweder von Hand per drag+drop aus dem Lineal "herausziehen" oder auch mit Script-Fu etwas machen, aber ich fürchte, das wird leider recht kompliziert.

          Gruß, LX

          --
          RFC 1925, Satz 8: Es ist komplizierter als man denkt.
  2. Hallo paul

    Frage: Gibt es eine Möglichkeit das rechteckige Bild in ein Polygon zu konvertieren? Natürlich ist das dann kein Bild mehr sondern ... was anderes.

    Nein diese Möglichkeit gibt es nicht. Du kannst dich aber behelfen (Beispiel):

      
    #MyId {  
     position:relative;  
    }  
    #MyId img {  
     position:absolute;  
     top:0;  
     left:0;  
    }  
    #MyId span {  
     float:left;  
     clear:left;  
     height:18px;  
    }  
    
    
    <p Id="MyId">  
      <img src="grafik.png" alt="Grafik">  
      <span style="width:125px;"></span>  
      <span style="width:135px;"></span>  
      <span style="width:145px;"></span>  
      <span style="width:155px;"></span></p>  
    
    

    Hierbei werden ausnahmsweise Inlinestyles verwendet, weil eigene Ids für jedes <span> den Code auch nicht einfacher oder übersichtliche machen würden. Wie viele <span>s benötigt werden und mit welchen Maßen es bei dir passt, kannst du nur testen.

    Auf Wiederlesen
    Detlef

    --
    - Wissen ist gut
    - Können ist besser
    - aber das Beste und Interessanteste ist der Weg dahin!
  3. Zur Ergänzung noch ein paar Links zu Eric Meyer:
    slantastic - Weihnachtsbaum - curvelicious
    mfg Thomas