flowe: Bilder - auf halbtranspar. Layer über aufrufender Seite

Gruss an alle

Der Betreff sagt es schon - wie realisiert man das? Ich erwarte an dieser Stelle kaum Details - eher einen Wegweiser dahin, wo ich mich weiter informieren kann.

Mit vielem Dank - flowe

  1. Hallo,

    Der Betreff sagt es schon - wie realisiert man das? Ich erwarte an dieser Stelle kaum Details - eher einen Wegweiser dahin, wo ich mich weiter informieren kann.

    das ist einfach: Nimm ein beliebiges Kindelement von body, z.B. ein div, das bei "Nichtgebrauch" unsichtbar ist (display:none), und positioniere es absolut innerhalb von body. Gib ihm top:0; left:0; und width:100%; height:100%; so dass es das gesamte Dokument überdeckt. Dann eine Hintergrundfarbe im RGBA-Farbraum, bei der du noch mit dem Transparenzwert "spielen" kannst.

    In diesen Containers kannst du nun ein Bild setzen.

    Soviel also zum prinzipiellen Ansatz.

    So long,
     Martin

    --
    Time's an illusion. Lunchtime doubly so.
      (Douglas Adams, "The Hitchhiker's Guide To The Galaxy")
    Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
    1. Gruss, Martin

      das ist einfach: Nimm ein beliebiges Kindelement von body, z.B. ein div, das bei "Nichtgebrauch" unsichtbar ist (display:none), und positioniere es absolut innerhalb von body. Gib ihm top:0; left:0; und width:100%; height:100%; so dass es das gesamte Dokument überdeckt. Dann eine Hintergrundfarbe im RGBA-Farbraum, bei der du noch mit dem Transparenzwert "spielen" kannst.
      In diesen Containers kannst du nun ein Bild setzen.
      Soviel also zum prinzipiellen Ansatz.
      So long, Martin

      Ich bin froh um den deutlichen Wegweiser. Ich werde damit experimentieren und verstehe dein "so long" als Einladung, ggf. mit konkreten Nachfragen zurückzukommen.

      Mit vielem Dank - flowe

      1. Gruss an Martin und Matthias Apsel

        Ich hasse lose Ende, und darum will ich auch hier noch einen Schlusspunkt setzen.

        In SelfHtml gibt es scheinbar keine einfache bzw. mir einsichtige Lösung für "Bilder auf Layer". Es ist ja überhaupt nicht so "einfach", wie Martin "im Prinzip" meinte. Die im Netz zunemend anzutreffenden Beispiele beruhen wohl auf irgendwelchen Layout-basierten, gängigen Werkzeugkästen.

        So bleibe ich bei meiner alten und bewährten Methode mit einem Frameset.

        Trotzdem mit Dank und freundlichem Gruss - flowe

        1. Om nah hoo pez nyeetz, flowe!

          In SelfHtml gibt es scheinbar keine einfache bzw. mir einsichtige Lösung für "Bilder auf Layer".

          Du könntest dir Lightbox anschauen. Beispiel

          Matthias

          --
          Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Rat und Ratatouille.

          1. Du könntest dir Lightbox anschauen. Beispiel
            Matthias

            Vielen Dank für diesen zielführenden Hinweis! Ich habe dann entdeckt, dass es einen ganzen Schwarm von Varianten gibt, vergleichsweise zu besichtigen unter
            http://www.grafiker.de/kreativ-news/06102010/die-15-besten-jquery-lightbox-skripte

            Nun gilt es, das für mich zweckmässigste und flexibelste Modell zu finden.
            Nochmals herzlichen Dank - flowe

    2. Hallo,

      Der Betreff sagt es schon - wie realisiert man das? Ich erwarte an dieser Stelle kaum Details - eher einen Wegweiser dahin, wo ich mich weiter informieren kann.

      das ist einfach: Nimm ein beliebiges Kindelement von body, z.B. ein div, das bei "Nichtgebrauch" unsichtbar ist (display:none), und positioniere es absolut innerhalb von body. Gib ihm top:0; left:0; und width:100%; height:100%; so dass es das gesamte Dokument überdeckt. Dann eine Hintergrundfarbe im RGBA-Farbraum, bei der du noch mit dem Transparenzwert "spielen" kannst.

      In diesen Containers kannst du nun ein Bild setzen.

      Soviel also zum prinzipiellen Ansatz.

      So long,
      Martin

      Gruss, Martin

      Vorerst muss ich zugeben, dass ich mit deinem "das ist einfach"-Ansatz nicht klar gekommen bin, und ich habe auch keine weitere Info dazu gefunden. Aber ich trage das Problem weiter mit mir herum und wäre schon dankbar um eine etwas ausführlichere Anweisung.

      In der Anwendung wird es noch umständlicher, indem ich aus einem Excel-PDF bzw. Foxit-Fenster heraus nummerierte Bilder als Pop-up auf dem erwähnten halbtransparenten Layer zeigen möchte, inkl. blättern. Man sieht solches gelegentlich - ein Dreamweaver-Trick? Das alles funktioniert seit Jahren problemlos in einem HTML-Frameset. Nur ist die zugrundeliegende HTML-Tabelle aufwändig und fehlerbehaftet und soll durch das Ur-Dokument - das Excel-PDF - ersetzt werden.

      Mit Dank und Gruss - flowe

      1. Hi,

        Hallo,
        [...]
        So long,
        Martin

        bitte zitiere nicht das gesamte Vorposting, sondern nur die Passagen, die für den Zusammenhang nötig sind. In einer Unterhaltung am Kneipentisch wiederholst du doch auch nicht jeden Satz deines Gegenübers, bevor du ihm antwortest, oder?

        In der Anwendung wird es noch umständlicher, indem ich aus einem Excel-PDF bzw. Foxit-Fenster heraus ...

        Was denn nun? Excel oder PDF? - Woraus ein PDF-Dokument erzeugt wurde, ist völlig wurscht.

        Nun, was auch immer - ich bin davon ausgegangen, dass wir uns im Web-Kontext bewegen, also in einem HTML-Dokument. Excel oder PDF als Basis ist natürlich eine ganz andere Liga, in der ich mich nur ansatzweise auskenne.

        Das alles funktioniert seit Jahren problemlos in einem HTML-Frameset. Nur ist die zugrundeliegende HTML-Tabelle aufwändig und fehlerbehaftet und soll durch das Ur-Dokument - das Excel-PDF - ersetzt werden.

        PDF mag für den Anwender eine ebenbürtige Alternative für HTML sein. Aber technisch sind das zwei völlig verschiedene Welten, zumal schon das Einbetten von PDF in Webseiten irgendwie Glückssache ist. Du musst davon ausgehen, dass das PDF-Dokument bei vielen Nutzern nicht "im Browser" geöffnet wird, sondern im PDF-Viewer als separate Applikation. Und dort hast du als Autor keinerlei Kontrolle mehr darüber.

        So long,
         Martin

        --
        Jungs sind wie Waschmaschinen: Wenn man sie anmacht, kommen sie ins Schleudern.
        Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
        1. Hi, Martin

          Ich sehe nun die Probleme mit der angedachten "Vereinfachung" (PDF-Tabelle statt HTML-Liste), aber ohne fragen lernt man nichts...

          In deinem 1. Posting hast du geschrieben:

          das ist einfach: Nimm ein beliebiges Kindelement von body, z.B. ein div, das bei "Nichtgebrauch" unsichtbar ist (display:none), und positioniere es absolut innerhalb von body. Gib ihm top:0; left:0; und width:100%; height:100%; so dass es das gesamte Dokument überdeckt. Dann eine Hintergrundfarbe im RGBA-Farbraum, bei der du noch mit dem Transparenzwert "spielen" kannst. In diesen Containers kannst du nun ein Bild setzen.

          und ich gestand, dass ich damit nicht klar kam. Vielleicht könnte ich das andernorts mal brauchen, sofern du so nett wärest, die paar Zeilen auszudeutschen? Nicht gerade einleuchtend ist die Steuerung mit display:none etc.

          Mit Dank und Gruss - flowe

          1. Om nah hoo pez nyeetz, flowe!

            das ist einfach: Nimm ein beliebiges Kindelement von body, z.B. ein div, das bei "Nichtgebrauch" unsichtbar ist (display:none), und positioniere es absolut innerhalb von body. Gib ihm top:0; left:0; und width:100%; height:100%; so dass es das gesamte Dokument überdeckt. Dann eine Hintergrundfarbe im RGBA-Farbraum, bei der du noch mit dem Transparenzwert "spielen" kannst. In diesen Containers kannst du nun ein Bild setzen.

            und ich gestand, dass ich damit nicht klar kam. Vielleicht könnte ich das andernorts mal brauchen, sofern du so nett wärest, die paar Zeilen auszudeutschen? Nicht gerade einleuchtend ist die Steuerung mit display:none etc.

            Das ist CSS. Die Aussage, dass du display: none nicht verstehst, deute ich so, dass du von CSS insgesamt relativ wenig Ahnung hast. Deshalb hier (viel) zum Lesen: display, Box-Modell, Positionierung, Größenangaben, http://de.selfhtml.org/css/eigenschaften/positionierung.htm#postop@title=Positionierungsangaben, Farbangaben

            Matthias

            --
            Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Kaff und Kaffee.

            1. Om nah hoo pez nyeetz, flowe!

              Matthias - ich wünsche dir auch alles Gute!

              Das ist CSS. Die Aussage, dass du display: none nicht verstehst, deute ich so, dass du von CSS insgesamt relativ wenig Ahnung hast. Deshalb hier (viel) zum Lesen: display, Box-Modell, Positionierung, Größenangaben, Positionierungsangaben, Farbangaben [je mit links].

              Deine Deutung trifft's genau. Ich habe zwar in jeder HTML-Datei ein paar Zeilen und Anweisungen CSS - aber keine Rede von Kompetenz und Systematik. Ich werde deine Hinweise neugierig durchackern, wird aber etwas Zeit brauchen.

              Dank und Gruss - flowe