Pop-up

Uno script semplice e rapido per inserire una serie di finestre pop-up nel vostro sito (effetto analogo a quello che potete osservare, nei fatti, in "Graficamente")

1- Copiate tra il tag <head> ed il tag </head> della vostra pagina questo script:

... con il quale definirete e le caratteristiche della vostra finestra e la posizione in cui essa si aprirà.

Se le voci toolbar, scrollbar, location, statusbar, menubar, titlebar, resizable sono impostate sull'opzione 0, come vedrete nell' esempio, le barre di navigazione non si vedranno all'interno della finestra, che non potrà essere ridimensionata.. Personalmente vi consiglio di lasciar il tutto intoccato, fuorché l' opzione scrollbar (sostituite'0' con '1').

2- Width indica la dimensione della finestra nel senso della larghezza, height, invece, nel senso dell' altezza. Gli altri due valori, la distanza dai margini superiori e laterali, definendo la posizione di apertura.


3- Per far aprire il link come pop-up, dovrete semplicemente inserire questa stringa in vece del collegamento:

Ovviamente al posto di 'NOME' deve essere inserito l' URL della pagina.

Visto che lo script precedente consente di aprire tutte pop-up delle stesse dimensioni, chi avesse invece l'esigenza di diversificare la taglia a seconda dell'uso può usare lo script che segue (mutando ovviamente i valori). Non richiede alcun codice nella sezione <HEAD> poiché agisce direttamente sul link richiamato.

Posted on 28 Oct 2007 by Sar@

Cursore

Una delle richieste più frequenti inerenti ai miei templates è quella relativa alle modalità attraverso le quali modifico l' aspetto del cursore. Visto che si tratta di un effetto piuttosto banale, vi indico qui le modalità di procedura:

1- Inserire tra il tag <head> ed il tag </head> della pagina questo script:


<STYLE>

A:hover {CURSOR: STYLE}
BODY {CURSOR: STYLE}
TD {CURSOR: STYLE}

</STYLE>


2- Sostituire STYLE con i modelli che vi riporto qui di seguito:


crosshair: crocetta
w-resize: freccia verso sinistra
e-resize: freccia verso destra
n-resize: freccia verso l'alto
s-resize: freccia verso il basso
move: 4 frecce
hand: mano
wait: clessidra
help: punto interrogativo e freccia
text: linea testo verticale
ne-resize: freccia inclinata verso destra in alto
default: freccia inclinata verso sinistra in alto
se-resize: freccia inclinata verso destra in basso
sw-resize: freccia inclinata verso sinistra in basso

Per fare in modo che l' effetto si produca in corrispondenza del passaggio del mouse sul link, tale valore deve essere sostituito in rapporto ad a:hover.

Posted on 28 Oct 2007 by Sar@

Scroll di testo

Effetto molto decorativo e particolarmente amato, per chi vuole lasciare un’ impronta indimenticabile nelle proprie pagine, è quello di creare una piccola tabellina con menu in salita. In verità i tags che determinano l’ effetto e prescindono dalla cornice (io, ad esempio, li uso autonomamente nei div) sono quelli compresi tra <marquee> e </marquee>, ma all’ inizio, specie se non si ha familiarità con i div, la tabella è la cornice più decorativa. Per ottenere un effetto analogo a questo:


Testo testo testo testo testo testo testo testo testo testo testo testo




E’ sufficiente inserire nel vostro html, ovviamente nel punto desiderato, queste istruzioni, sostituendo le parole date con un testo a vostra scelta:

<table border="1" bordercolor="#000000" width="150">
<tr>
<td height="120" align="center">
<marquee width=150 height=120 direction="up" scrollAmount=1><p>Testo testo testo testo testo testo testo testo testo testo testo testo<br></marquee>
</font>
</td>
</tr>
</table>

Posted on 28 Oct 2007 by Sar@

Links dipinti

Posto sia possibile personalizzare ampiamente i propri links miscelando l’uso di alcuni dei filtri di cui sopra, semplicemente inserendone i valori tra le caratteristiche dell’a:hover, un effetto di cui faccio largo uso è quello di evidenziare i links entro piccoli quadri, dipinti con i colori dello stesso sfondo. La procedura, a dispetto di quel che potrebbe sembrare, è davvero molto semplice e consta di un unico passaggio. Ovvero si tratta di incollare tra i valori di <STYLE TYPE="text/css"> una stringa come questa :



a:hover{ FONT-FAMILY: Verdana; font-color: #5F57A0; font-weight:bold; font-size: 10px; background-image: url('http://...'); cursor:crosshair; border: #5F57A0; border-style: dashed; border-top-width: 2px; border-right-width: 2px; border-bottom-width: 2px; border-left-width: 2px}

in cui:

· a:hover indica che la caratteristica si avrà al passaggio del mouse
· font-family indica il tipo di carattere che si vuole usare
· font-color, il tono del carattere
· font-weight, la tipologia grafica (bold, ad esempio, dice che il testo riuscirà in grassetto)
· font-size, le dimensioni del carattere
· background, l’ immagine che farà da sfondo (vi consiglio di usare una stringa ritagliata dall’ immagine principale, ma assunta in modo autonomo:si carica prima)
· border o border-color, il colore della cornice
· border-style, l’ aspetto del bordo (“dotted” è puntinato, “dashed” presenta un effetto ritaglio e “solid” una linea continua)
· border-width, lo spessore del bordo

Posted on 28 Oct 2007 by Sar@

Inserimento files musicali

Istruzione richiestissima e davvero semplice, questa stringa, da inserire tra i tag <body> e </body>, permette di inserire un file musicale che allieti la visita degli utenti. Personalmente uso solo sequenze midi, per una duplice motivazione: sono leggere e si caricano immediatamente e sono supportate da qualunque host, al contrario dei files mp3. I files wav sono in genere molto pesanti e li consiglierei solo per messaggi brevissimi e secchi (Ad esempio la registrazione di un piccolo messaggio di saluto per i visitatori).
Le istruzioni, diversificate a seconda dei files, sono sono le seguenti:

wav e midi

<bgsound src="http:// www.yoursite.com/song.mid" loop="Infinite">

In cui, ovviamente, il valore dopo “http://“ identificherà l’ indirizzo di rete in cui è allocato il file secondo la sua estensione. Il “loop“ individua la durata. Ovviamente con “Infinite“ sia ha un ciclo continuo, ma è possibile scegliere qualunque valore. Se ad esempio volete postare un semplice messaggio di benvenuto la scelta migliore è ‘1‘.

mp3, wma e wmv

<object id="MediaPlayer1"
width=150 height=100
classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" type="application/x-oleobject"><param name="URL" value="http://www.yoursite.com/song.mp3">

In questo caso non è necessario specificare il loop, perché apparirà la schermata del lettore.

rm e ram


<embed align="top" src="http://www.yoursite.com/song.rm" width="150" height="95" type="audio/x-pn-realaudio-plugin" loop="</htpdiv" autostart="true" controls="all" border="0">

 

Posted on 28 Oct 2007 by Sar@

<< Previous 1 2 3 4 Next >>

Content Management Powered by CuteNews

<< go back



Disclaimer

All bands, actors, anime, manga and video game related materials depicted on Graficamente belongs to their respective owners and creators. No copyright infringment is intended. They are used for educational, personal and non-profit purposes only. Graficamente is in no way associated with these parties.
All original materials (content, design and coding) belongs to Sar@, or otherwise stated. No parts of Graficamente may be reproduced in part or in whole without written permission. The layouts offered by this site may be used under the conditions written in the Terms of Service.
Questo sito non rappresenta una testata giornalistica in quanto viene aggiornato senza alcuna periodicità. Non può pertanto considerarsi un prodotto editoriale ai sensi della legge n. 62 del 7.03.2001.



home page