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:
|
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"; |
|
Una volta che le parti che non devono essere stampate sono state nascoste, la stampa si avvia attraverso la seguente istruzione JavaScript: window.print(); |
|
Per ogni zona del documento occorre inserire la
seguente istruzione JavaScript: nome.style.display = ""; |
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>e così via.
<td id=due>
<td id=tre>
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. |
|
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) { |
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"
e così di seguito.
height=103 width=79 border=0></a>
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.
©2002 - 2008 www.webfract.it