- 63
- 6
- CPU
- intet i7 870
- HDD
- 1tb
- RAM
- corsair 8gb xms3
- GPU
- asus nvidia 470
- Monitor
- Samsung
- PSU
- enermax
- Case
- coolermaster elite
- OS
- wind7 / Linux
Buon giorno a tutti oggi vorrei distaccarmi un po' dalle guide di cms, e parlare di strumenti utili e divertenti, che si trovano per il web, ovviamente dentro l'ambito del web development.
Oggi ci soffermeremo sull'utilizzo di falsi popup presi dal sito dhtmlpopups, molto divertenti ma soprattutto utili, e ovviamente di facile comprensione.
Contrariamente a cio che potreste pensare non utilizzeremo css per crearli, l'esempio in questione è una finestra aperta tramite un input pulsante e verrà successevamente chiusa cliccando sulla "x" in alto a destra della finestra stessa.
Ecco il codice:
Per chi non se ne intendesso cominciamo a dire che tra i tag DIV è racchiusa la nostra finestra compresa di istruzioni per rimanere nascosta all'apertura della pagina;
Visto che ne abbiamo parlato il codice sottostante non solo afferma la posizione della finestra nella pagina ma fa si che la nostra finestra rimanga nascosta all'apertura della pagina, in caso volessimo fare il contrario ovvero farla aprire fin dall'inizio basta cambiare il valore "none" con "block";
Ora passiamo alla funzione che identifica l'azione di chiusura della finestra stessa, come vedete questa funzione va ad assegnare il valore "none" cosi da nascondere la finestra;
Ora dobbiamo analizzare la tabella, essa compone graficamente la nostra finestra in questo caso la nostra finestra è composta da tre immagini, la barra blu in alto, lo sfondo del contenuto e la x, in particolare a questa immagine collegheremo la funzione di chiusura della finestra cosi quando cliccheremo la x la finestra si chiuderà;
Per finire con la nostra analisi abbiamo il tasto di input che assegnerà il valore block cosi da mostrare la finestra nascosta;
è molto semplice ma soprattutto molto utile e personalizzabile fino alle estremo, possiamo assegnare il la funzione di apertura anche ad un immagine senza che venga cliccata cambianto il valore onClick='document.getElementById("styled_popup").style.display="block"' con "OnMouseOver" oppure con altro come doppio click ecc.. insomma ciò che più vi piace
Oggi ci soffermeremo sull'utilizzo di falsi popup presi dal sito dhtmlpopups, molto divertenti ma soprattutto utili, e ovviamente di facile comprensione.
Contrariamente a cio che potreste pensare non utilizzeremo css per crearli, l'esempio in questione è una finestra aperta tramite un input pulsante e verrà successevamente chiusa cliccando sulla "x" in alto a destra della finestra stessa.
Ecco il codice:
Codice:
<head>
<title></title>
</head>
<body>
<body>
<h1></h1>
<div id='styled_popup' name='styled_popup' style='width: 380px; height: 300px; display:none; position: absolute; top: 150px; right: 50px;'>
<script type='text/javascript'>
function styledPopupClose() {
document.getElementById("styled_popup").style.display = "none";
}
</script>
<table width='380' cellpadding='0' cellspacing='0' border='0'>
<tr>
<td><img height='23' width='356' src='images/x11_title.gif'></td>
<td><a href='javascript:styledPopupClose();'><img height='23' width='24' src='images/x11_close.gif' border='0'></a></td>
</tr>
<tr><td colspan='2' style='background: url("http://www.tomshw.it/forum/images/x11_body.gif") no-repeat top left; width: 380px; height: 277px;'>
Contenuto
</td></tr>
</table>
</div>
<input type='submit' value=' Apri ' onClick='document.getElementById("styled_popup").style.display="block"'>
<p>
</p>
</body>
</html>
Per chi non se ne intendesso cominciamo a dire che tra i tag DIV è racchiusa la nostra finestra compresa di istruzioni per rimanere nascosta all'apertura della pagina;
Visto che ne abbiamo parlato il codice sottostante non solo afferma la posizione della finestra nella pagina ma fa si che la nostra finestra rimanga nascosta all'apertura della pagina, in caso volessimo fare il contrario ovvero farla aprire fin dall'inizio basta cambiare il valore "none" con "block";
Codice:
<div id='styled_popup' name='styled_popup' style='width: 380px; height: 300px; display:none; position: absolute; top: 150px; right: 50px;'>
Ora passiamo alla funzione che identifica l'azione di chiusura della finestra stessa, come vedete questa funzione va ad assegnare il valore "none" cosi da nascondere la finestra;
Codice:
<script type='text/javascript'>
function styledPopupClose() {
document.getElementById("styled_popup").style.display = "none";
}
</script>
Ora dobbiamo analizzare la tabella, essa compone graficamente la nostra finestra in questo caso la nostra finestra è composta da tre immagini, la barra blu in alto, lo sfondo del contenuto e la x, in particolare a questa immagine collegheremo la funzione di chiusura della finestra cosi quando cliccheremo la x la finestra si chiuderà;
Codice:
<td><a href='javascript:styledPopupClose();'><img height='23' width='24' src='images/x11_close.gif' border='0'></a></td>
Per finire con la nostra analisi abbiamo il tasto di input che assegnerà il valore block cosi da mostrare la finestra nascosta;
Codice:
<input type='submit' value=' Apri ' onClick='document.getElementById("styled_popup").style.display="block"'>
è molto semplice ma soprattutto molto utile e personalizzabile fino alle estremo, possiamo assegnare il la funzione di apertura anche ad un immagine senza che venga cliccata cambianto il valore onClick='document.getElementById("styled_popup").style.display="block"' con "OnMouseOver" oppure con altro come doppio click ecc.. insomma ciò che più vi piace