Zum Inhalt springen

GIFBUILDER und halbtransparente Ebene

Erstellt am 12. März 2009 · 2 Antworten · letzte Antwort am 12. März 2009

Tags: Bilder, Frage

dabjoern ·

Hallo Leute,

ich baue gerade ein GMENU Menü, das aus Bildern besteht. Im NO Zustand soll jedes Bild mit einer halbtransparenten, farbigen Ebene überlagert werden, d.h. die Ebene ist bspw. rot und zu 50% durchlässig, so dass man das Hintergrundbild erkennt bzw durchschimmert. Im ACT Zustand soll das Bild normal, ohne weitere Ebene sichtbar sein.

Ich habe schon viel mit Hilfe von Google gesucht und auch das ein oder andere Stichwort gefunden, komme aber gerade nicht weiter. Das Menü klappt erstmal generell, mit der überlagernden Ebene tue ich mich aber schwer. Wie erreiche ich mein Ziel? Hat das irgendwas mit "mask" zu tun?

Heir mein bisheriges Menü:

lib.navigation_content = HMENU
lib.navigation_content {
  entryLevel = 2
  1 = GMENU
  1 {
    wrap = <ul id="navigation_content">|</ul>
    noBlur = 1
    NO {
      ATagTitle.field = title
      allWrap = <li>|</li>
      XY = 50,50
      1 = IMAGE
      1 {
        offset = 0,0
        file {
          import = uploads/media/
          import.data = levelmedia:2, slide
          import.listNum = 0
          width = 50
          height = 50
          import.override.field = media
        }
      }
    }
    ACT = 1
    ACT < .NO
  }
}

Danke für jeden Hinweis.

Grüße, dabjoern

dabjoern ·

Ich habe mal ein wenig weiter gebastelt und bin jetzt hier angekommen:

lib.navigation_content = HMENU
lib.navigation_content {
  entryLevel = 2
  1 = GMENU
  1 {
    wrap = <ul id="navigation_content">|</ul>
    noBlur = 1
    NO {
      ATagTitle.field = title
      allWrap = <li>|</li>
      XY = 50,50
      1 = IMAGE
      1.file = GIFBUILDER
      1.file {
        format = gif
        1 = IMAGE
        1.offset = 0,0
        1.file {
          import = uploads/media/
          import.data = levelmedia:2, slide
          import.listNum = 0
          width = 50
          height = 50
          #Bilder nicht nur von aktueller, sondern von betroffenen Seiten anzeigen
          import.override.field = media
        }
        #Halbtransparenz
        1.mask = GIFBUILDER
        1.mask.backColor = #808080
      }
    }
    ACT = 1
    ACT {
      ATagTitle.field = title
      allWrap = <li>|</li>
      XY = 50,50
      1 = IMAGE
      1.offset = 0,0
      1.file {
        import = uploads/media/
        import.data = levelmedia:2, slide
        import.listNum = 0
        width = 50
        import.override.field = media
        height = 50
      }
    }
  }
}

Bilder werden im NO Zustand mit einer irgendwie transparenten Ebene überlagert. Mir scheint, als würde die Farbe, die man angbibt (#808080) keinen großen Einfluss haben. Ich würde gerne die Layer in einer bestimmten Farbe haben. Jetzt wirkt sie weiß.

dabjoern ·

Naja, habs nun hinbekommen. Ich erzeuge noch eines neues Bild via GIFBUILDER, vergebe die richtige Hintergrundfarbe und setze die Maske. Nun klappt es! JEAH.

Hier der Code für alle, die auch mal Bock auf sowas haben. Verbesserungen sehr willkommen!

#Bild auslesen, zwischenspeichern und mehrfach nutzen
temp.navigation_content_image = COA
temp.navigation_content_image {
  1 = IMAGE
  1.offset = 0,0
  1.file {
    import = uploads/media/
    import.data = levelmedia:2, slide
    import.listNum = 0
    width = 50
    height = 50
    #Bilder nicht nur von aktueller, sondern von betroffenen Seiten anzeigen
    import.override.field = media
  }
}

lib.navigation_content = HMENU
lib.navigation_content {
  entryLevel = 2
  1 = GMENU
  1 {
    wrap = <ul id="navigation_content">|</ul>
    noBlur = 1
    NO {
      ATagTitle.field = title
      allWrap = <li>|</li>
      XY = 50,50
      1 = IMAGE
      1.file = GIFBUILDER
      1.file {
        format = gif
        1 < temp.navigation_content_image.1
        #halbtransparentes Bild
        2 = IMAGE
        2.file = GIFBUILDER
        2.file.backColor = #35505C
        2.mask = GIFBUILDER
        #Farbe bestimmt Grad der Transparenz (000000 - 0% Transparenz)
        2.mask.backColor = #808080
      }
    }
    ACT = 1
    ACT {
      ATagTitle.field = title
      allWrap = <li>|</li>
      XY = 50,50
      1 < temp.navigation_content_image.1
    }
  }
}