... Un effetto molto semplice e suggestivo, che opera, però (fate attenzione!) solo con I.e (4+). In sostanza vi consente di trasformare un' immagine a colori in bianco e nero, salvo restituirla alla sua tinta originale al passaggio del mouse. Può essere un' idea molto graziosa e differente per presentare i vostri banners e le vostre fanlistes. Per realizzare l' effetto è sufficiente sostituiate l' Url http://www.yoursite.net/image.gif con quello relativo alla vostra immagine.

<img src="http://www.yoursite.net/image.gif" style="filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)" onmouseover="this.style.filter='progid:DXImageTransform.Microsoft.BasicImage(grayscale=0)'" onmouseout="this.style.filter='progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)'">

Grey: Trasforma un'immagine a colori in una in bianco e nero. In buona sostanza, la sua applicazione può aiutarvi a raddoppiare le skins di un sito senza dover intervenire di grafica.

filter:Gray()

FlipH e FlipV(): Con questi filtri gemelli potrete capovolgere orizzontalmente o verticalmente un testo od un' immagine. Anche in questo caso, di solito, tendo ad usarli in combinato con altri filtri.

filter:FlipH()
filter:FlipV()

X ray: Un filtro molto semplice, per lo più adatto alle immagini (come vi presento in anteprima). Consente infatti di renderne una sorta di 'radiografia'. Di solito lo uso in unione ad altri filtri, visto che l' effetto non è immediatamente visibile.

filter:XRay()

Alpha: Ecco il filtro che fa più gola di tutti (non negate: è quello che ha registrato il maggior numero di sottrazioni non autorizzate). Estremamente versatile, vi consente, semplicemente modificando lo style, di ottenere risultati diversissimi. Vi inserisco, per cominciare, le formule più semplici (in questo caso ho aggiunto uno sfondo, ma solo per farvi vedere meglio. Ovviamente non lo riporto nel codice). Rispettivamente, dall'alto verso il basso:

filter:alpha(style=1, opacity=100); height: 10px
filter:alpha(style=2, opacity=100); height: 10px
filter:alpha(style=3, opacity=100); height: 10px

Se volete fare di meglio, e, giustamente, non vi accontentate, i parametri completi seguono questa formula (che è poi quella che uso io):

filter:alpha(style=1, opacity=100 finishopacity=0, startx=0, finishx=100, starty=0, finishy=100); height: 10px
filter:alpha(style=2, opacity=100 finishopacity=0, startx=0, finishx=100, starty=0, finishy=100); height: 10px
filter:alpha(style=3, opacity=100 finishopacity=0, startx=0, finishx=100, starty=0, finishy=100); height: 10px

Attraverso prove e concrete sperimentazioni sul campo, potrete invertire lo sfumato, ad esempio, o creare delle screziature incredibilmente decorative.

Glow: Per ottenere questo semplicissimo effetto, l'istruzione da inserire nei css, in corrispondenza del settore che dovrà assumere il carattere, sarà:

filter:glow(color:#000000 strength=1); height: 10px

I valori relativi ai colori ed all'intensità sono ovviamente puramente indicativi. Potete variare come preferite, finché non avrete ottenuto l'effetto desiderato. Un valore che NON dovete mai dimenticare è HEIGHT. Spesso è omesso nei manuali canonici, ma è in virtù di questo che l'effetto è concretamente visualizzabile.
Se non vi basta, ecco la scheda tecnica completa:

Glow(Color=?, Strength=?)

Traccia un contorno colorato dell'oggetto cui è applicato.
Color: colore del contorno, in esadecimale.
Strength: permette, attraverso un numero decimale, di decidere le dimensioni dello spessore del contorno.

Invert: Con questo filtro potete intervenire sul testo o sull' immagine, invertendone i toni, con un effetto analogo alla solarizzazione grafica.

filter:Invert()

Shadow: Per ottenere questo semplicissimo effetto, l' istruzione da inserire nei css, in corrispondenza del settore che dovrà assumere il carattere, sarà:

filter:shadow(color:#000000); height: 10px

I valori relativi ai colori ed all'intensità sono ovviamente puramente indicativi. Potete variare come preferite, finché non avrete ottenuto l' effetto desiderato. Un valore che NON dovete mai dimenticare è HEIGHT. Spesso è omesso nei manuali canonici, ma è in virtù di questo che l' effetto è concretamente visualizzabile.
Se non vi basta, ecco la scheda tecnica completa:

Shadow(Color=?, Direction=?)

Molto simile al dropshadow, ma meno preciso e, quindi, più adatto agli inesperti. Crea l'ombra dell'oggetto cui viene applicato, ed utilizza due semplici parametri.
Color: colore dell'ombra in esadecimale.
Direction: direzione in cui viene proiettata l'ombra. Possibili alternative: up, down, rigth, left.

Dropshadow: Per ottenere questo semplicissimo effetto, l'istruzione da inserire nei css, in corrispondenza del settore che dovrà assumere il carattere, sarà:

filter:dropshadow(color:#000000, offx=1, offy=1); height: 10px

I valori relativi ai colori ed all'intensità sono ovviamente puramente indicativi. Potete variare come preferite, finché non avrete ottenuto l'effetto desiderato. Un valore che NON dovete mai dimenticare è HEIGHT. Spesso è omesso nei manuali canonici, ma è in virtù di questo che l'effetto è concretamente visualizzabile.
Se non vi basta, ecco la scheda tecnica completa:
DropShadow(Color=?, OffX=?, OffY=?, Positive=?)

Effetto ombreggiatura. Rende l'oggetto cui viene applicato, quasi, tridimensionale, o comunque crea un effetto di "sollevazione" dal piano di lavoro standard a causa dell'ombra che proietta sul livello più basso.
Color: indica, in esadecimale, il colore dell'ombra.
Offx: distanza, sull'asse delle X, dell'ombra dall'oggetto che la genera (funziona coi numeri decimali).
OffY: distanza, sull'asse delle Y, dell'ombra dall'oggetto che la genera (funziona coi numeri decimali).
Positive: Determina se applicare il colore scelto per l'ombra all'oggetto ad al suo "negativo". In pratica, settato ad 1( o con valori diversi da 1 e 0) si vedrà l'ombra del colore desiderato proiettato sullo sfondo originale della pagina web, invece col valore 0 settato si vedrà lo sfondo dell'oggetto desiderato assumere il colore assegnato all'ombra, mentre l'oggetto avrà il colore dello sfondo originale (si negativizza l'oggetto ed il suo sfondo).

Wave: Questo filtro, che uso con molto piacere sulle immagini o sui links, consente di dare ad essi un piacevole ed originale effetto distorto.

filter:Wave(freq=3, light=20, phase=10, strength=2); height: 10px

Blur: Per ottenere questo semplicissimo effetto, l'istruzione da inserire nei css, in corrispondenza del settore che dovrà assumere il carattere, sarà:

filter:blur(strength=5); height: 10px

Il codice che vi propongo è molto più semplice di quello ortodosso, ma per cominciare può andar bene. Un valore che NON dovete mai dimenticare è HEIGHT. Spesso è omesso nei manuali canonici, ma è in virtù di questo che l' effetto è concretamente visualizzabile.
Se non vi basta, ecco la scheda tecnica completa:

Blur(Add=?, Direction=?, Strength=?)

Crea un effetto di sfocatura sull'oggetto cui viene applicato.
Add: parametro rpivo di reale utilità, si consiglia di ometterlo.
Direction: direzione della sfocatura dell'oggetto (left, rigth, up e down)
Strength: la "forza" con cui si visualizza la sfocatura. In altri termini, un valore basso implicherà un effetto poco visibile, quasi sfumato, mentre con valori alti si avrà un effetto molto più marcato (vanno utilizzati valori decimali)


Ora permettetemi qualche consiglio! I filtri sono meravigliosi, decorativi e versatili. Potete infilarli praticamente OVUNQUE, e sostituiscono meravigliosamente la grafica pixel.. MA NON ESAGERATE! Errore tipico dei principianti (che ovviamente ho fatto anch'io) è quello di usare una profusione di effetti. Non va bene: non migliorano l'estetica. Bene due abbinamenti, malissimo una sovrapposizione priva di senso. Attenti agli abbinamenti di colore: fate in modo che l' effetto AUMENTI la leggibilità e non il contrario. Se una pagina distrugge la retina di chi la guarda, è molto difficile il malcapitato torni. Ricordatevi che non tutti i browsers li supportano. Io uso I6 e mi curo sempre di segnalarlo, in modo che gli utenti lo sappiano. Altra nota: i filtri cozzano talora con le transizioni (altro tutorial postato in questa sede). Ergo scegliete: o gli uni o le altre. Del resto è abbastanza logico non ci sia bisogno di sovrapporli. Altra indicazione importante: i filtri possono reciprocamente annullarsi. Non solo: se settate un filtro nel body, è possibile esso ponga in evidenza tutte le aree coperte da altri filtri. Motivo per il quale consiglio di applicare gli stessi sempre in modo CIRCOSCRITTO all' area che intendete decorare. Bene: non mi resta che augurarvi buon lavoro!

Una delle esigenze che ho avvertito fortemente come webmistress, in ragione della mia passione per la scrittura, è stata quella di oscurare alcuni contenuti dei miei siti dedicati alla narrativa amatoriale, in modo da poter proteggere gli utenti più giovani. Uno strumento adatto allo scopo, anche se non sempre sufficiente, è senz'altro l'alert, ovvero uno script java attivo sul singolo link o nella pagina web. Ve ne offro diverse tipologie, indicandovi altresì le caratteristiche d'uso.

1. Il primo alert risulta attivo su tutta la pagina e deve essere inserito tra i tag <head> ed </head> del vostro sito. Presenta una funzione history.back legata al tasto annulla, che è tuttavia inutile laddove la pagina venga aperta in una nuova finestra. Atro dettaglio fastidioso è che se la navigazione avviene in .php e si mantiene attivo l'header, l'alert apparirà in ogni pagina, potendo rallentare la navigazione.:

<script language="JavaScript"> <!-- if (!confirm("WARNING: NC17!!!! If you are under the age of consent in your area click CANCEL to GO BACK")) { history.back(); } //--> </script>

2. Il secondo alert è attivo sul singolo link (all'interno del target <a>) e si caratterizza come semplice indicazione del contenuto (esempio)

onClick="alert('La seguente storia possiede un rating R (= Restricted), ovvero è sconsigliata ad un pubblico inferiore ai 14 anni. Se accedete alla lettura certificate automaticamente di avere un'età pari o superiore a quella succitata');"

3. Il terzo alert è attivo sul singolo link (all'interno del target <a>) e si caratterizza per la possibilità di annullare l'accesso al contenuto (esempio)

<a href="javascript:if (confirm('Attenzione! Il contenuto della storia che vi apprestate a leggere NON E' ADATTO AI MINORI DI ANNI 18. Con il clic sul tasto 'OK' dichiarate di avere l'età richiesta. In caso contrario premete 'Annulla' e tornate indietro.')) location = 'http://yoursite.com'">your site</a>

Per quanto questa prassi sia spesso contestata, sottolineandone la scarsa utilità, visto che non è affatto difficile aggirare qualsivoglia tipo di limite posto in tal senso, applicare una protezione al proprio sito vuol dire soprattutto indicare in modo specifico che, come webmaster, non si gradisce affatto il proprio lavoro sia scopiazzato da aspiranti trafficoni. Chi infatti ha curiosità in merito ad una struttura o ad uno scripts può tranquillamente DOMANDARE, via e-mail, senza bisogno di spacciare per proprio il lavoro altrui. Le protezioni possono esser di difformi tipi, a seconda delle esigenze di tutela.


1- Inibizione generale del tasto destro (script fornito gentilmente da Maki e funzionale anche per Mozilla Firefox). E' sufficiente incollare il seguente codice tra i tag <head> ed </head> del proprio source:

<script language="Javascript1.2"> // (C) 2000 www.CodeLifter.com // http://www.codelifter.com // Free for all users, but leave in this header // Set the message for the alert box am = " MESSAGGIO."; // do not edit below this line // =========================== bV = parseInt(navigator.appVersion) bNS = navigator.appName=="Netscape" bIE = navigator.appName=="Microsoft Internet Explorer" function nrc(e) { if (bNS && e.which > 1){ alert(am) return false } else if (bIE && (event.button >1)) { alert(am) return false; } } document.onmousedown = nrc; if (document.layers) window.captureEvents(Event.MOUSEDOWN); if (bNS && bV<5) window.onmousedown = nrc; </script>

2- Inibizione del tasto della funzione "salva immagine con nome" presente sui browser IE e che si attiva cliccando col tasto destro del mouse su un'immagine presente nella pagina web:

a- Incolla il seguente codice tra i tag <head> ed </head> del source (se vuoi ripristinare l'effetto sulla singola immagine, ricorda di scrivere il suo codice come <IMG SRC="tua_immagine.jpg" GALLERYIMG="yes">):

<META HTTP-EQUIV="imagetoolbar" CONTENT="no">

b- Seconda versione, in due tempi (dal sito Weblink). Incolla il seguente codice tra i tag <head> ed </head> del source:

<script language="JavaScript" type="text/javascript"> <!-- /************************************************** Right-Click Disabler Created by Howard Chen Get more JavaScripts at http://start.at/javascripts/ Bugs report to jdeveloper@telebot.net This script is free as long as the credits above are kept **************************************************/ function BrowserCheck() { var b = navigator.appName if (b=="Netscape") this.b = "ns" else if (b=="Microsoft Internet Explorer") this.b = "ie" else this.b = b this.version = navigator.appVersion this.v = parseInt(this.version) this.ns = (this.b=="ns" && this.v>=4) this.ns4 = (this.b=="ns" && this.v==4) this.ns5 = (this.b=="ns" && this.v==5) this.ie = (this.b=="ie" && this.v>=4) this.ie4 = (this.version.indexOf('MSIE 4')>0) this.ie5 = (this.version.indexOf('MSIE 5')>0) this.min = (this.ns||this.ie) } is = new BrowserCheck() function init() { if(document.images) { document.images.onmousedown = mouseDown; for(i=0;i<document.images.length;i++) document.images[i].onmousedown = mouseDown; } } function mouseDown(e) { if ((is.ns && e.which == 1) || (is.ie && event.button == 1)) { } else { if (is.ie) alert("Il messaggio che preferite") else if (is.ns) setTimeout('alert("Il messaggio che preferite',50) } } // End --> </script>

Inserisci l'evento onload nel tag body:

BODY onLoad="init()">

3- Inibizione copia-incolla testuale. Incolla il seguente codice tra i tag <head> ed </head> del source:

<script type="text/javascript"> /*********************************************** * Disable select-text script- © Dynamic Drive (www.dynamicdrive.com) * This notice MUST stay intact for legal use * Visit http://www.dynamicdrive.com/ for full source code ***********************************************/ //form tags to omit in NS6+: var omitformtags=["input", "textarea", "select"] omitformtags=omitformtags.join("|") function disableselect(e){ if (omitformtags.indexOf(e.target.tagName.toLowerCase())==-1) return false } function reEnable(){ return true } if (typeof document.onselectstart!="undefined") document.onselectstart=new Function ("return false") else{ document.onmousedown=disableselect document.onmouseup=reEnable } </script>

Come ho già detto, non è affatto difficile per chi non sia proprio del tutto inesperto aggirare questi limiti, ma non è per certo lo scopo che ne determina l'inserimento. Per quel che mi riguarda, nei fatti, aggiungere l'alert vuol solo dire che non autorizzo nessuno a vivere sulle mie spalle. Per contro sono disponibilissima con chi mi domanda informazioni in merito agli scripts che uso (e che, per altro, possono essere reperiti da chiunque con un minimo di curiosità ed applicazione)

Un buon modo per ottimizzare gli spazi, senza ricorrere a menu particolarmente dispendiosi, è adottare i jump-menu. Si tratta di piccoli form, in sostanza, che consentono in modo snello e veloce l'accesso alle varie pagine di uno spazio web. Ve ne propongo uno (© Dynamic Drive) che unisce alla significativa riduzione dello spazio la possibilità di veder indicato il contenuto delle pagine di accesso.

1. tra i tag <head> ed </head> (o nel vostro foglio di stile, omettendo, in questo caso <style> e </style>) dovete indicare le caratteristiche cromatiche e la tipologia del font che vi interessa usare nel modulo. Ovvero incollare (ma i colori ed i caratteri sono, ovviamente, regolabili a discrezione) quanto segue:

<style> select { background-color: #D4D4D4; font-family: Verdana; font-size: 10px; color: #000000; border: 1px solid #000000; } input { font-family: verdana; font-size: 10px; color: #000000; background-color: #D4D4D4; border: 1px solid #000000; } #descriptions { text-align: left; font: 10px Verdana; color: #000000; } </style>

2. tra i tag <body> ed </body> (in corrispondenza del punto in cui volete che il form appaia) incollate quanto segue, ovviamente inserendo i vostri links in luogo della traccia data e la descrizione relativa. Naturalmente, purché si rispetti la progressione, il numero delle pagine può essere aumentato o diminuito. Allo stesso tempo può essere modificata la destinazione (trovate indicato 'newwin', come target di apertura. Ma se volete aprire il form nella stessa pagina, selezionate 'self' e via di seguito):

<form name="drop" > <select name="script" onChange="displaydesc(document.drop.script.selectedIndex)"> <option selected value="http://" target="newwin">Page 1</option> <option value="http://" target="newwin">Page 2</option> <option value="http://" target="newwin">Page 3</option> </select> <input type="button" value="Visita" onClick="jumptolink(document.drop.script.selectedIndex)"><br> <span id="descriptions"> </span> </form> <script> /*********************************************** * Drop down menu w/ description- © Dynamic Drive (<a href="http://www.dynamicdrive.com)" target="_blank">www.dynamicdrive.com)</a> * This notice must stay intact for use * Visit <a href="http://www.dynamicdrive.com/" target="_blank">http://www.dynamicdrive.com/</a> for full source code ***********************************************/ //CUSTOMIZE TEXT DESCRIPTIONS FOR LINKS ABOVE var textdisplay=new Array() textdisplay[0]="text text" textdisplay[1]="text text" textdisplay[2]="text text" function jumptolink(what){ var selectedopt=document.drop.script.options[what] if (document.getElementById && selectedopt.getAttribute("target")=="newwin") window.open(selectedopt.value) else window.location=selectedopt.value } function displaydesc(which){ if (document.all) descriptions.innerHTML=textdisplay[which] else if (document.getElementById) document.getElementById("descriptions").innerHTML=textdisplay[which] } displaydesc(document.drop.script.selectedIndex) document.drop.script.options[0].selected=true </script>