Ingo Dehne: Versch. Bilder für Bildschirm und Drucker

Hallo,

ich suche nach einer Möglichkeit für die Printausgabe einer Webseite ein anders Bild zu verwenden als für die Bildschirmausgabe.
Der Hintergrung ist einfach, daß die Farbbilder im S/W-Druck ziemlich daneben aussehen. Ich würde sie gerne gegen "vernünftige" S/W-Bilder austauschen. Farbdruck spielt keine Rolle.
Ich hab 2 Stylesheets für Print- und Bildschirmausgabe, und die Bilder als Hintergrundbilder eingebunden, aber bei der Printausgabe verschlucken IE5 und Opera7 die Hintergrundbilder. Gibt es noch eine andere Möglichkeit?

Gruß

Ingo Dehne

  1. Hi,

    Das ist eine Standardfunktion dieser Browser. Geh mal in das drucken Menü von deinem Browser, da wirst du sehen das man Hintergrundbilder drucken expliziet ein bzw. ausschalten kann. Hat mit den CSS-Eigenschaften nichts zu tun.

    Grüße - Andre

  2. Hi,

    ich suche nach einer Möglichkeit für die Printausgabe einer Webseite ein anders Bild zu verwenden als für die Bildschirmausgabe.
    Der Hintergrung ist einfach, daß die Farbbilder im S/W-Druck ziemlich daneben aussehen. Ich würde sie gerne gegen "vernünftige" S/W-Bilder austauschen. Farbdruck spielt keine Rolle.
    Ich hab 2 Stylesheets für Print- und Bildschirmausgabe, und die Bilder als Hintergrundbilder eingebunden, aber bei der Printausgabe verschlucken IE5 und Opera7 die Hintergrundbilder. Gibt es noch eine andere Möglichkeit?

    Binde beide Bilder gleichzeitig ein.
    Den Druck-Bildern gibst Du eine Klasse, den Screen-Bildern eine andere.
    Im Screen-Stylesheet setzt Du die Druck-Bilder auf display:none und die Screen-Bilder auf display:inline.
    Im Druck-Stylesheet genau umgekehrt.

    cu,
    Andreas

    --
    Der Optimist: Das Glas  ist halbvoll.  - Der Pessimist: Das Glas ist halbleer. - Der Ingenieur: Das Glas ist doppelt so groß wie nötig.
    http://mud-guard.de/? http://www.andreas-waechter.de/ http://www.helpers.de/
  3. Hallo Ingo,

    Ich hab 2 Stylesheets für Print- und Bildschirmausgabe, und die Bilder als Hintergrundbilder eingebunden, aber bei der Printausgabe verschlucken IE5 und Opera7 die Hintergrundbilder. Gibt es noch eine andere Möglichkeit?

    also ich würde in diesem Fall beide Bilder einbauen (nebeneinander)
    und dann per CSS jeweils das "falsche" ausblenden. Klar, es gibt
    dann einige Browser mit unzureichender oder ohne CSS-Unterstützung,
    die beide Bilder anzeigen, aber damit kann man imho leben.

    Viele Grüße,
    Stefan

    1. Hi Stefan,

      also ich würde in diesem Fall beide Bilder einbauen (nebeneinander)
      und dann per CSS jeweils das "falsche" ausblenden.

      Sollte ich das Bild dann über <img class="xx"...> oder besser über <img id="name"...> ansprechen, oder spielt das keine Rolle?

      Gruß

      Ingo

      1. Moin!

        Sollte ich das Bild dann über <img class="xx"...> oder besser über <img id="name"...> ansprechen, oder spielt das keine Rolle?

        Spielt keine Rolle. Bedenke aber: Jede ID kann im Dokument nur _einmal_ vorkommen, du kannst dir also die IDs "img1-print" und "img1-screen" ausdenken, um Bild 1 anzusprechen, oder du nimmst die Klassen "printbild" und "screenbild" für alle Bilder, die vorkommen. Klassen sind da irgendwie sinnvoller.

        - Sven Rautenberg

        --
        ss:) zu:) ls:[ fo:} de:] va:) ch:] sh:) n4:# rl:| br:< js:| ie:( fl:( mo:|
    2. Hab's schon.

      Per <span></span> klappt das ganz prima :-)

      Danke an alle.

      Gruß

      Ingo

      1. Hallo Ingo,

        Per <span></span> klappt das ganz prima :-)

        mit dem span-Element hätte ich da irgendwie nicht gearbeitet, wie
        hast Du es realisiert?

        Mein Vorschlag:

        ...
        <style type="text/css">
        @media print { img.screen { display: none; } }
        @media screen { img.print { display: none; } }
        </style>
        </head>
        <body>
        <p><img alt="" class="screen" src="bunt.jpg"><img alt="" class="print" src="sw.gif"></p>
        ...

        Viele Grüße,
        Stefan