Tricks – La finestra fantasma
10 Giu 2008 | Di Giuseppe | Categoria: In primo piano, In primo piano: tricksChissà quante volte sarà capitato di guardare con rincrescimento contenuti che si vorrebbero inserire nel proprio blog, ma a cui si deve rinunciare perché il servizio scelto non consente di fare l’upload dei files? Spesso, probabilmente. Ma una possibilità c’è: visualizzare i contenuti in una nuova finestra che si apre cliccando su un bottone. “Ma la nuova finestra richiede l’invio del file di una pagina in html”, obietterà qualcuno. Non sempre. Basta far sì che la finestra si crei all’istante: essa non esiste, non è un file, ma prende forma nel momento in cui clicchiamo su un pulsante.
Ecco come fare. Questo esempio consiste in un tasto che permette di visualizzare una finestra, nella quale compare una delle plaquettes in flash del sito di letteratura “AltraMusa“.
Spiegazioni
La parte colorata di rosso è lo script (linguaggio javascript) vero e proprio, mentre le righe in blu si riferiscono al pulsante.
Attenzione: per comodità siamo stati costretti ad andare a capo, ma questo NON deve avvenire quando si inserisce lo script nel blog. Le righe in javascript devono essere 10, considerando anche quelle iniziali; in pratica, la riga che inizia con “{msg=open” deve finire con “left=00,top=00″);“, così come quella che inizia con “msg.document.write("<html><head>” deve finire con “</center></body></html>");“. Se non si fa attenzione, lo script non funziona. Per ottenere questo risultato, basta copiare il sottostante codice, incollarlo nel Blocco note di Windows e togliere la spunta all’opzione “A capo automatico” nel menù “Formato”.
Ora vediamo come personalizzare il contenuto.
Le dimensioni della finestra: i comandi “width=650,height=500” servono a darci la dimensione della finestra che comparirà nell’angolo alto a sinistra; larghezza (width) e altezza (height) sono espresse in pixels e basta cambiarle per adattarle al contenuto.
Il titolo della finestra: i comandi “<title>E-book di AltraMusa</title>” indicano il titolo della finestra; pertanto, è possibile scrivere ciò che si desidera al posto di “E-book di AltraMusa“.
Il contenuto della finestra: i comandi (o, meglio, i tag) che iniziano con “<object classid=” e finiscono con “</embed> </object>” rappresentano il contenuto della pagina; in questo caso, si tratta del codice di un filmato in flash. Naturalmente, se si desidera inserire un filmato analogo, basterà cambiare il nome del file (cioè, in questo caso, “plaquette03.swf“), facendo bene attenzione ad impostarne correttamente le dimensioni. Stesso discorso vale per elementi di altro tipo come, ad esempio, un file in formato pdf.
Il pulsante: i comandi che iniziano con “<input type” e finiscono con “width: 170px”>” si riferiscono al pulsante che fa aprire la finestra fantasma. Per cambiare nome al pulsante, basta scrivere una frase o una parola al posto di “I poeti di marzo“. Se si vuole togliere lo stile grassetto al font, occorre scrivere “normal” al posto di “bold“. Per ingrandire il carattere, bisogna cambiarne le dimensioni agendo sul comando “12px“. Per cambiare colore allo stesso pulsante, si deve modificare il codice esadecimale “#EEEEEE“, facendo attenzione a non eliminare il carattere cancelletto (#). Infine, le dimensioni. Queste ultime sono determinate dal codice “width: 170px“, ma sono facoltative; è bene impostarle solo quando si ha l’esigenza di dare una larghezza esatta al pulsante.
function finestra()
{msg=open("","ebook","directories=no,menubar=no,resizable=yes,scrollbars=auto,statusbar=no,
toolbar=no,width=650,height=500,screenX=00,screenY=00,left=00,top=00");
msg.document.open();
msg.document.write(“<html><head><title>E-book di AltraMusa</title></head><body bgcolor=’#ffffff’><center><object classid=’clsid:D27CDB6E-AE6D-11cf-96B8-444553540000′ codebase=’http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,22,0′ width=’622′ height=’420′> <param name=’movie’ value=’http://www.altramusa.com/poesie/plaquette03.swf’ /> <param name=’quality’ value=’high’ /> <embed src=’http://www.altramusa.com/poesie/plaquette03.swf’ quality=’high’ pluginspage=’http://www.macromedia.com/go/getflashplayer’ type=’application/x-shockwave-flash’ width=’622′ height=’420′></embed> </object><form><br><br><input type=button value=’chiudi questa finestra’ onClick=’window.close()’></form></center></body></html>”);
msg.document.close();
}
</script>
Se desideri copiare e poi incollare il codice – apportando ovviamente le modifiche per personalizzarlo – utilizza il testo sottostante.
<script type="text/javascript">
function finestra()
{msg=open("","ebook","directories=no,menubar=no,resizable=yes,scrollbars=auto,statusbar=no, toolbar=no,width=650,height=500,screenX=00,screenY=00,left=00,top=00");
msg.document.open();
msg.document.write("<html><head><title>E-book di AltraMusa</title></head><body bgcolor='#ffffff'><center><object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,22,0' width='622' height='420'> <param name='movie' value='http://www.altramusa.com/poesie/plaquette03.swf' /> <param name='quality' value='high' /> <embed src='http://www.altramusa.com/poesie/plaquette03.swf' quality='high' pluginspage='http://www.macromedia.com/go/getflashplayer' type='application/x-shockwave-flash' width='622' height='420'></embed></object><form><br><br><input type='button' value='chiudi questa finestra' onclick='window.close()'></form></center></body></html>");
msg.document.close();
}
</script>
<input type ="button" value="I poeti di marzo" onclick="finestra()" style="font-size: 12px; font-family: verdana, arial, helvetica, sans-serif; color: #800000; font-weight: bold; background-color: #EEEEEE; width: 170px;">