INDICE

STAMPARE UN'IMMAGINE A SCELTA DELL'UTENTE

Abbiamo deciso di offrire ai visitatori del sito la possibilità di stampare un'immagine a scelta fra alcune proposte. Possiamo, ad esempio, presentare una lista come quella che segue: accanto ad ogni immagine, c'è una breve descrizione.

Personalizza i tuoi biglietti d'auguri! Clicca sull'immagine che preferisci e stampala subito!

Questa è una simpatica decorazione che sembra adatta soprattutto ai bambini
Ecco invece un albero di Natale adatto a tutti
Ecco infine un tipico paesaggio natalizio

Cliccando a destra sopra un'immagine si apre un menu di contesto nel quale è possibile, fra il resto, scegliere l'opzione "Stampa immagine" (con MSIE), oppure "Stampa immagine", con Firefox.  Se però vogliamo permettere la stampa di un'immagine attraverso il clic del tasto sinistro del mouse, possiamo procedere in questo modo:

  • nascondere alla stampa tutto il documento tranne la parte da stampare

Per questo occorre dare un nome identificativo di ogni zona. Se poi ad esempio una zona è indicata con id=uno per nasconderla basta utilizzare la seguente istruzione JavaScript: uno.style.display = "None";

  • avviare la stampa del documento

Una volta che le parti che non devono essere stampate sono state nascoste, la stampa si avvia attraverso la seguente istruzione JavaScript: window.print();

  • ripristinare l'aspetto originario della pagina.

Per ogni zona del documento occorre inserire la seguente istruzione JavaScript: nome.style.display = "";
dove al posto di nome occorre sostituire l'identificatore di ogni zona

In tutte le istruzioni, display si riferisce allo schermo. In effetti tutti gli oggetti tranne quello selezionato per un breve istante scompaiono dalla visualizzazione, ma subito vengono ripristinati.
NOTA BENE: Siccome non sempre la finestra di dialogo della stampa si apre prima del ripristino, e quindi viene stampata solo la zona prescelta, dovremo interrompere il ripristino fino al completamento della stampa. Questo viene fatto attraverso un avviso di conferma.

IDENTIFICARE LE ZONE DEL DOCUMENTO

Inseriamo la nostra pagina in una tabella.
Diamo poi un identificatore ad ogni cella, per poter decidere, in seguito, quale parte va stampata e quale no. Usiamo il seguente codice:

<td id=uno>
<td id=due>
<td id=tre>
e così via.

Tutte le altre opzioni delle colonne, come colore di sfondo, tipo di carattere e così via possono essere inserite come al solito.

Qui di fianco è rappresentata la tabella con i nomi degli identificatori che abbiamo dato noi: ad essi faremo riferimento. La nostra tabella è costituita in modo da inserire, in una singola cella, solo l'immagine che dovrà essere stampata. I bordi della tabella non compaiono perché abbiamo aggiunto l'opzione border=0.
id=titolo
id=primoid=secondo
id=terzoid=quarto
id=quintoid=sesto

NASCONDERE LE PARTI CHE NON DEVONO ESSERE STAMPATE

Per ridurre al minimo le istruzioni, introduciamo una funzione che nasconda tutto. Ciò è possibile attraverso il seguente codice:

<script language=javascript>
	 function nascondi() {
	        titolo.style.display = "None";
                primo.style.display = "None";
	        secondo.style.display = "None";
                terzo.style.display = "None";
	        quarto.style.display = "None";
                quinto.style.display = "None";
	        sesto.style.display = "None"
                } 

RIPRISTINARE L'ASPETTO ORIGINARIO DELLA PAGINA

Questo va fatto attraverso il seguente codice:


           function ripristina() {
                titolo.style.display= "";
                primo.style.display = "";
              secondo.style.display = "";
                terzo.style.display = "";
               quarto.style.display = "";
               quinto.style.display = "";
                sesto.style.display = "" 
             }

AVVIARE LA STAMPA

Usare il seguente codice:


function Stampa(conta) {
Questa funzione ha il parametro conta in parentesi: vedremo in seguito come riferirci ad esso.
nascondi()
Viene chiamata l'esecuzione della funzione nascondi()
   conta.style.display = "";
Viene ripristinata la visibilità della zona identificata da conta
 var richiesta = window.confirm("confermi la stampa?"); 
Viene visualizzato un messaggio di conferma, per permettere un eventuale ripensamento
 if (richiesta) {  
Se l'utente ha fatto clic su OK
window.print(); 
  window.alert("fatto?")
   }   
Si avvia la stampa; viene lanciato un messaggio di avviso che serve, semplicemente, a permettere tutte le operazioni di stampa senza che si ripristini la pagina: in questo caso, infatti, verrebbe stampata la pagina intera.
ripristina() 
Viene chiamata l'esecuzione della funzione ripristina() e quindi si ritorna a visualizzare l'intero documento.

Ora non resta che inserire gli opportuni collegamenti alle varie immagini: nel caso dell'immagine in alto, che è stata inserita nella cella identificata con id=primo scriveremo, ad esempio, il seguente codice:

<a href="javascript:Stampa(primo)"><img src="abete.gif" 
height=103 width=79 border=0></a>
e così di seguito.

Cosa succede quando si clicca sull'immagine? Viene chiamata la funzione Stampa(primo). Come ricorderete, abbiamo prima dichiarato invece la funzione Stampa(conta). Di fatto, al posto di conta, viene sostituito primo, che poi non è altro che l'identificatore della cella cui appartiene l'immagine che vogliamo stampare. Ecco allora che è come se avessimo scritto la seguente funzione:


function Stampa(primo) {
   nascondi()
   primo.style.display = "";
   var richiesta = window.confirm("confermi la stampa?");
   if (richiesta) {
      window.print(); 
      window.alert("fatto?")
   }
   ripristina()
}
}
Abbiamo quindi ottenuto lo scopo di limitare al massimo le istruzioni: volendo stampare la seconda immagine, che si trova nella cella identificata da id=terzo scriveremo il seguente codice:
<a href="javascript:Stampa(terzo)"><IMG height=78 src="http://www.webfract.it/GUIDA/natale.jpg" width=87 border=0></a>
e così di seguito.

Cliccando qui è possibile accedere ad una pagina che presenta l'esempio di cui abbiamo parlato perfettamente funzionante. Le immagini vengono stampate in alto a sinistra nella pagina. Se si preferisce stamparle centrate occorrerà centrare la tabella. Inoltre nella stampa compare anche quanto è stato inserito all'interno dei tags <title> </title>. E' possibile accedere al codice e copiarlo.


INDICEINDIETRO

©2002 - 2008 www.webfract.it