Bestimmtes bild jeweils von einer Web-Seite drucken

[hugo]

Hallo,

ich habe eine Seite mit mehreren Diagrammen als Bilder.
Ich möchte neben jedes Bild (Diagram) eine Drucker-Schaltfläche stellen, so dass man jeweils nur das Bild druckt was man möchte und nicht die ganze Seite. Ist sowas möglich und wenn ja, was wäre eine einfache Möglichkeit?
Danke

[Der Martin]

Hi,

ich habe eine Seite mit mehreren Diagrammen als Bilder.
Ich möchte neben jedes Bild (Diagram) eine Drucker-Schaltfläche stellen, so dass man jeweils nur das Bild druckt was man möchte und nicht die ganze Seite. Ist sowas möglich ...

nur auf Umwegen und mit Einschränkungen. Mit reinem HTML schon mal gar nicht.

und wenn ja, was wäre eine einfache Möglichkeit?

Du müsstest mit Javascript nachhelfen, beispielsweise beim Klick auf das entsprechende Element eine (zusätzliche) Klasse für html oder body setzen, dann window.print() aufrufen, und die Klasse dann wieder wegnehmen. Im Print-Stylesheet legst du dann fest, dass alle Kindelemente dieser Klasse mit Ausnahme des einen, das gedruckt werden soll, ein display:none; verpasst kriegen.

Alternativ könntest du den Elementen, die zum Drucken auswählbar sind, eine Checkbox voranstellen und im Print-Stylesheet alles außer input:checked+* ausblenden. Dann geht's ohne Javascript, und außerdem hätte man die Option, mehrere Diagramme auf einmal auszuwählen.

Ciao,
 Martin

[hugo]

Danke,

Im Print-Stylesheet legst du dann fest, dass alle Kindelemente dieser Klasse mit Ausnahme des einen, das gedruckt werden soll, ein display:none; verpasst kriegen.

Bräuchte ich dann mehrere Print-Stylesheets? Ich wollte es ja wenn möglich dynamisch machen. Kann man überhaupt mehrere Print-Stylesheets für eine Seite machen? Vielleicht habe ich auch nicht alles 100% verstanden.

[Matthias Apsel]

Om nah hoo pez nyeetz, hugo!

Dein HTML sollte vielleicht so aussehen:

<ul id="diagramme">  
  <li><input [link:http://wiki.selfhtml.org/wiki/Doku:HTML/Formulare/Checkboxen@title=type="checkbox"]><img src="..." alt="..."></li>  
  <li><input type="checkbox"><img src="..." alt="..."></li>  
  ...  
</ul>

das Printstylesheet könnte dann so aussehen:

#diagramme input, input + img {display: none} /* ausgeblendet werden die Checkboxen und Bilder, die auf Checkboxen folgen */  
#diagramme [link:http://wiki.selfhtml.org/wiki/Doku:CSS/Grundlagen_von_CSS/Ansprechen_von_Elementen_%28Selektoren%29/Pseudoklassen#Die_Pseudoklassen_:enabled.2C_:disabled_und_:checked@title=:checked] [link:http://wiki.selfhtml.org/wiki/Doku:CSS/Grundlagen_von_CSS/Ansprechen_von_Elementen_%28Selektoren%29#Direkten_Nachbarn_eines_Elements_ansprechen_.28der_Nachbarselektor.29@title=+] img {display: block} /* eingeblendet werden Bilder, die auf selektierte Checkboxen folgen */

Das Unterstrichene sind Links auf weiterführerende Literatur.

Matthias

[hugo]

Om nah hoo pez nyeetz, hugo!

Dein HTML sollte vielleicht so aussehen:

<ul id="diagramme">

<li><input [link:http://wiki.selfhtml.org/wiki/Doku:HTML/Formulare/Checkboxen@title=type="checkbox"]><img src="..." alt="..."></li>
  <li><input type="checkbox"><img src="..." alt="..."></li>
  ...
</ul>

>   
> das Printstylesheet könnte dann so aussehen:  
>   
> ~~~css

#diagramme input, input + img {display: none} /* ausgeblendet werden die Checkboxen und Bilder, die auf Checkboxen folgen */  

> #diagramme [link:http://wiki.selfhtml.org/wiki/Doku:CSS/Grundlagen_von_CSS/Ansprechen_von_Elementen_%28Selektoren%29/Pseudoklassen#Die_Pseudoklassen_:enabled.2C_:disabled_und_:checked@title=:checked] [link:http://wiki.selfhtml.org/wiki/Doku:CSS/Grundlagen_von_CSS/Ansprechen_von_Elementen_%28Selektoren%29#Direkten_Nachbarn_eines_Elements_ansprechen_.28der_Nachbarselektor.29@title=+] img {display: block} /* eingeblendet werden Bilder, die auf selektierte Checkboxen folgen */

Das Unterstrichene sind Links auf weiterführerende Literatur.

Matthias

Hallo Matthias,

checkboxen wollte ich aber nicht. Trotzdem danke. :(

[Gunnar Bittersmann]

@@hugo:

nuqneH

checkboxen wollte ich aber nicht.

Was macht dich da so sicher? Dass die Checkboxen nicht sichtbar sein müssen, hatte Matthias ja erwähnt.

Trotzdem danke. :(

Vielleicht liest du erstmal die Postings, für die du dich abfällig „bedankst“?

Qapla'

[Gunnar Bittersmann]

@@Matthias Apsel:

nuqneH

[code lang=css]#diagramme input, input + img {display: none} /* ausgeblendet werden die Checkboxen und Bilder, die auf Checkboxen folgen */

IIRC geht das so nicht. Die Checkboxen dürfen nicht auf 'display: none' gesetzt werden, sondern müssen anders unsichtbar gemacht werden, bspw. durch Rausschieben aus dem Viewport.

Und damit die Checkboxen (obwohl sie nicht im Viewport sind) angewählt werden können, müssen sie zugehörige 'label'-Elemente haben.

Das Unterstrichene sind Links auf weiterführerende Literatur.

Yep. ;-)

Qapla'

[Matthias Apsel]

Om nah hoo pez nyeetz, Gunnar Bittersmann!

IIRC geht das so nicht. Die Checkboxen dürfen nicht auf 'display: none' gesetzt werden, sondern müssen anders unsichtbar gemacht werden, bspw. durch Rausschieben aus dem Viewport.

Und damit die Checkboxen (obwohl sie nicht im Viewport sind) angewählt werden können, müssen sie zugehörige 'label'-Elemente haben.

Das soll auch nur im Druckstylesheet geschehen und funktioniert tadellos (Im Safari konnte ich auf den ersten Blick keine Druckvorschau finden).

Matthias

[Gunnar Bittersmann]

@@Matthias Apsel:

nuqneH

Das soll auch nur im Druckstylesheet geschehen

Stimmt, _da_ muss man sie nicht anwählen können. ;-)

Ich bezog mich darauf, dass hugo im Browser keine sichtbaren(!) Checkboxen wollte.

Qapla'

[Felix Riesterer]

Lieber hugo,

was wäre eine einfache Möglichkeit?

eine "einfache Möglichkeit" wäre, das Bild zu verlinken, sodass das Linkziel die Grafikdatei selbst ist. Dann kann der Benutzer bequem über "Datei->Drucken" das Bild ausdrucken.

Diesen Mechanismus kann man mit JavaScript verkomplizieren, indem man in das Dokument dynamisch einen <iframe> einbaut, in dem die gerade angesprochene Grafikdatei als Dokument geladen wird. Daraufhin kann man den Inhalt des <iframes> als eigene Seite drucken.

Wer es noch komfortabler haben will, kann ein Dokument basteln, das die URL der Grafikdatei als URL-Parameter übernimmt, diese Datei ins Dokument lädt und im Erfolgsfalle den Druckdialog zeigt, um danach den <iframe> wieder aus dem Dokument zu entfernen. Dieses Dokument würde im <iframe> völlig selbständig agieren, ohne dass man "von außen" dann noch etwas tun müsste (außer den Druckdialog bedienen).

Liebe Grüße,

Felix Riesterer.