Christian: Text hinter teilweise transparentem Bild

Hallo.

Ich habe ein klassisches zweispaltiges Design mit fester Breite und Höhe. Links ist die Navigation (nicht scrollbar), rechts der Inhalt (Text+Bilder), der scrollbar ist. Jetzt möchte ich über beide Spalten im unteren Bereich eine Stadtsilhouette legen. Das Bild habe ich im Augenblick als png - es ist entweder schwarz oder transparent. Das Problem ist, dass man unter dem transparenten Teil zwar den drunterliegenden Inhalt erkennen kann, er aber zum Beispiel nicht selektierbar ist.

Kennt jemand eine Lösung?

Christian.

  1. Kennt jemand eine Lösung?

    nein, spontan fällt mir keine ein die ein element "durchklickbar" macht

    du könntest mit javascript abfangen, wo du ein onmousedown bzw. onmouseup durchführstm, damit errechnest du, was zu selektieren ist und tust das dann auch

  2. Hi,

    Jetzt möchte ich über beide Spalten im unteren Bereich eine Stadtsilhouette legen. Das Bild habe ich im Augenblick als png - es ist entweder schwarz oder transparent. Das Problem ist, dass man unter dem transparenten Teil zwar den drunterliegenden Inhalt erkennen kann, er aber zum Beispiel nicht selektierbar ist.

    Das hat dich hoffentlich nicht ueberrascht.

    Kennt jemand eine Lösung?

    Du kannst es hoechstens in kleinere Bilder zerschneiden, so dass hauptsaechlich nur noch die schwarzen Bildteile uebrig bleiben, und diese dann passend positionieren.

    MfG ChrisB

    --
    „This is the author's opinion, not necessarily that of Starbucks.“
    1. Das hat dich hoffentlich nicht ueberrascht.

      Nein, nicht wirklich... *rofl*

      Du kannst es hoechstens in kleinere Bilder zerschneiden, so dass hauptsaechlich nur noch die schwarzen Bildteile uebrig bleiben, und diese dann passend positionieren.

      Das habe ich auch schon überlegt. Es ist aber insgesamt recht aufwändig und eliminiert den Effekt auch nur in größeren Regionen.

      Ich hatte gehofft, dass es z.B. in JavaScript eine Möglichkeit gibt zu befehlen "wenn das Silhouetten den Fokus hat, dann soll ihn der Text bekommen" oder so ähnlich.

      1. Ich hatte gehofft, dass es z.B. in JavaScript eine Möglichkeit gibt zu befehlen "wenn das Silhouetten den Fokus hat, dann soll ihn der Text bekommen" oder so ähnlich.

        wenn die textfarbe der farbe der skyline entspricht, dürfte es übrigens egal sein, ob das ding darüber oder darunter liegt - ggf hilft dir das weiter

        1. wenn die textfarbe der farbe der skyline entspricht, dürfte es übrigens egal sein, ob das ding darüber oder darunter liegt - ggf hilft dir das weiter

          Leider nicht, es sind auch Bilder mit dabei.

      2. Hi,

        Das habe ich auch schon überlegt. Es ist aber insgesamt recht aufwändig und eliminiert den Effekt auch nur in größeren Regionen.

        Tja, viel besser geht's mit vertretbarem Aufwand aber m.E. nicht.
        (Um die Datenmenge nicht unnoetig aufzublasen, kann man es natuerlich bei einer grossen Bildressource belassen, die "stueckweise" als Hintergrundbild in entsprechend platzierten Elementen angezeigt wird.)

        Ich hatte gehofft, dass es z.B. in JavaScript eine Möglichkeit gibt zu befehlen "wenn das Silhouetten den Fokus hat, dann soll ihn der Text bekommen" oder so ähnlich.

        Du kannst das Bild ausblenden, wenn der Cursor sich darueber befindet - wenn dir das besser gefaellt.

        Ansonsten muesstest du, um Elemente darunter auch klickbar zu machen, die Klicks auf dem Bild abfangen, die Position *aller* Elemente berechnen, schauen wekches sich gerade an der Klickposition befindet ... *das* wird aufwaendig.

        MfG ChrisB

        --
        „This is the author's opinion, not necessarily that of Starbucks.“
        1. Du kannst das Bild ausblenden, wenn der Cursor sich darueber befindet - wenn dir das besser gefaellt.

          wobei mir hier eine extrem aufwändige idee kommt: das bild in einzelne pixel zerschneiden und beim mouseover nur den einen pixel, auf dem sich der cursor befindet, ausblenden - dann kann man druch-markieren

          wenn die grafik größer wird, ist das allerdings etwas uncool

          1. Hallo

            wobei mir hier eine extrem aufwändige idee kommt: das bild in einzelne pixel zerschneiden und beim mouseover nur den einen pixel, auf dem sich der cursor befindet, ausblenden - dann kann man druch-markieren

            wenn die grafik größer wird, ist das allerdings etwas uncool

            Beim markieren von Text, wo es nicht nur um die Spitze des Mauspfeils geht, ist das noch viel uncooler. Wieviele Pixel sollen dann ausgeblendet (oder mit einem niedrigeren z-index versehen) werden? ;-)

            Ich sehe Megabyte-große JavaScript-Bibliotheken auf uns zukommen. >:-)

            Tschö, Auge

            --
            Die deutschen Interessen werden am Liechtenstein verteidigt.
            Veranstaltungsdatenbank Vdb 0.2
        2. Tja, viel besser geht's mit vertretbarem Aufwand aber m.E. nicht.

          Schade, schade, schade...

          (Um die Datenmenge nicht unnoetig aufzublasen, kann man es natuerlich bei einer grossen Bildressource belassen, die "stueckweise" als Hintergrundbild in entsprechend platzierten Elementen angezeigt wird.)

          Das klingt in der Tat nach einer recht vernünftigen Idee. Ich denke, ich werde es mal so probieren.
          Christian.