Versch. Bilder für Bildschirm und Drucker
Ingo Dehne
- css
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
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
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
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
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
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
Hab's schon.
Per <span></span> klappt das ganz prima :-)
Danke an alle.
Gruß
Ingo
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