Manuale HTML...2° parte!

Eccoci nella seconda pagina di questo manuale!

Ed ecco i primi, nuovi codici!

ENJOY! ^__~

Passiamo ora al LOOK dei LINKS.

Buffa come definizione no?

Ehm...fatto è che non me ne venivano altre^^;

Grazie a questo codice potrete eliminare quelle fastidiosissime linee sotto i links (e cioè le parole, lettere o frasi che, se cliccate, conducono ad altre pagine web)!

<STYLE> a{text-decoration:none} #menu { position:absolute; width:150px; height:150px; border:4px solid #7dbeff; background-color:#a9ecef; font-family:bimini; line-height:16px; cursor:n-resize; visibility:hidden; } .menuitems { padding-left:5px; padding-right:5px; } </STYLE>

Aggiungete questo codice nella parte HTML della pagina web, sotto la scritta <\head>...e le linee sotto i links SPARIRANNO!

Potrete cambiare il tipo di fonts, la grandezza ed il colore del link semplicemente scrivendolo dopo le definizioni (fonts, color, height...).

Tuttavia non è consigliabile usare questo codice in pagina piene zeppe di testo normale e links...non si capirebbe più nulla! Per questo cercate sempre di contrassegnare bene i links...Ed il prossimo codice vi darà una dritta!

Con questo codice, ogni qualvolta che passerete con il mouse accanto ai links della pagina dove l'avete applicato, il link diventerà di tipo "grassetto" e cambierà colore!

Se desiderate che il link diventi di tipo "corsivo", scrivete italics al posto di bold, mentre, se lo preferite normale, non scrivete nulla!

Volete "attaccare" qualcosa al vostro puntatore?

Usate il seguente codice!

<div id="dot0" style="position: absolute; visibility: hidden; height: 22; width: 21;"><img src="immagine.jpg" height=13 width=25></div> <div id="dot1" style="position: absolute; height: 13; width: 25;"><img src="immagine.jpg" height=13 width=25></div> <div id="dot2" style="position: absolute; height: 13; width: 25;"><img src="immagine.jpg" height=13 width=25></div> <div id="dot3" style="position: absolute; height: 13; width: 25;"><img src="immagine.jpg" height=13 width=25></div> <div id="dot4" style="position: absolute; height: 13; width: 25;"><img src="immagine.jpg" height=13 width=25></div> <div id="dot5" style="position: absolute; height: 13; width: 25;"><img src="immagine.jpg" height=13 width=25></div> <div id="dot6" style="position: absolute; height: 13; width: 25;"><img src="immagine.jpg" height=13 width=25></div> <script language="JavaScript"> var Xpos=0, Ypos=0; var inferior=navigator.appName=="Netscape"; var dots=new Array(); init(); function init() { var i=0; for (i=0; i<7; i++) dots[i]=new dot(i); for (i=0; i<7; i++) { dots[i].obj.left=dots[i].X; dots[i].obj.top=dots[i].Y; } if (inferior) startanimate(); else setTimeout("startanimate()", 2000); } function dot(i) { this.X=Xpos; this.Y=Ypos; this.dx=0; this.dy=0; if (inferior) this.obj=eval("http://www.geocities.com/eikopuchi/document.dot"+i); else this.obj=eval("dot"+i+".style"); } function startanimate() { setInterval("animate()", 20); } function setInitPositions(dots) { var startloc=document.all.tags("LI"), i=0; for (i=0; (i<startloc.length)&&(i<6); i++) { dots[i+1].X=startloc[i].offsetLeft+startloc[i].offsetParent.offsetLeft-36; dots[i+1].Y=startloc[i].offsetTop+startloc[i].offsetParent.offsetTop+72; } dots[0].X=dots[1].X; dots[0].Y=dots[1].Y-10; } function MoveHandler(e) { Xpos=e.pageX; Ypos=e.pageY; return true; } function MoveHandlerIE() { Xpos=window.event.x+document.body.scrollLeft; Ypos=window.event.y+document.body.scrollTop; } function vec(X, Y) { this.X=X; this.Y=Y; } function springForce(i, j, spring) { var dx=(dots[i].X-dots[j].X), dy=(dots[i].Y-dots[j].Y), len=dx*dx+dy*dy; if (len>100) { var l=Math.sqrt(len), springF=10*(l-10)/l; spring.X+=dx*springF; spring.Y+=dy*springF; } } function animate() { var height, width; var spring=new vec (0, 0), accel=new vec (0, 0); if (inferior) { height=window.innerHeight+document.scrollTop; width=window.innerWidth+document.scrollLeft; } else { height=document.body.clientHeight+document.body.scrollTop; width=document.body.clientWidth+document.body.scrollLeft; } dots[0].X=Xpos; dots[0].Y=Ypos; for (i=1; i<7; i++) { spring.X=0; spring.Y=0; if (i>0) springForce(i-1, i, spring); if (i<6) springForce(i+1, i, spring); accel.X=(spring.X-dots[i].dx*10); accel.Y=(spring.Y-dots[i].dy*10)+50; dots[i].dx+=0.01*accel.X; dots[i].dy+=0.01*accel.Y; if ((Math.abs(dots[i].dx)<0.1)&&(Math.abs(dots[i].dy)<0.1)&& (Math.abs(accel.X)<0.1)&&(Math.abs(accel.Y)<0.1)) { dots[i].dx=0; dots[i].dy=0; } dots[i].X+=dots[i].dx; dots[i].Y+=dots[i].dy; if (dots[i].Y>=height-37) { dots[i].Y=height-37; if (dots[i].dy>0) dots[i].dy=-0.75*dots[i].dy; } if (dots[i].X>=width-36) { dots[i].X=width-37; if (dots[i].dx>0) dots[i].dx=-0.75*dots[i].dx; } if (dots[i].X<0) { dots[i].X=0; if (dots[i].dx<0) dots[i].dx=-0.75*dots[i].dx; } dots[i].obj.left=dots[i].X; dots[i].obj.top=dots[i].Y; } } if (inferior) { document.captureEvents(Event.MOUSEMOVE); document.onMouseMove=MoveHandler; } else document.onmousemove=MoveHandlerIE; </script>

Aggiungete questo codice dopo la scritta <\head>.

Con questo codice dovrete essere molto ordinati e precisi...prima di tutto sostituite "immagine.jpg" con il nome e tipo dell'immagine che volete far trasportare dal puntatore, vi consiglio di utilizzarne una di formato e grandezza molto piccola.

Scrivete, oltre al nome dell'immagine, anche il suo percorso, ad esempio : files:///J://Progetti/MioSito/figura.gif

(La parte del percorso "files:/// è essenziale, le altre sono inventate. Sostituitele con il vero percorso!)

Sostituite in seguito grandezza e larghezza del files, ad esempio, dove c'è scritto height (altezza) : 13, inserite 2, mentre dove c'è width (larghezza) : 25, inserite 8.

Il risultato sarà molto simile a quello della mainpage.

Attenzione però : ricordate di sostituire nome, percorso, altezza e larghezza tutte le volte che lo troverete!

Se credete che questo codice sia un pò "impegnativo", o non avete cursori abbastanza carini, potete visitare la pagina di CometCursor (in inglese), oppure il CursoreAuguri (in italiano).

Sfortunatamente anche qui dovrete utilizzare l'HTML! :)

Siete stanchi/e dei LADRI?

Ma sì, quelli che entrano nelle vostre pagine, e "rubano" le vostre immagini e/o illustrazioni senza chiedere il permesso...e fin qui, tutto ok...ma quando cominciano ad inserirle nelle proprie pagine web, e senza darvi credito, spacciandosele per proprie...allora comincia a saltare la ciribiricoccola!

E cominciano ad apparire codici per fermarli...

<SCRIPT LANGUAGE="javascript"> var message="Giù le mani!"; function click(e) { if (document.all) { if (event.button == 2) { alert(message); return false; } } if (document.layers) { if (e.which == 3) { alert(message); return false; } } } if (document.layers) { document.captureEvents(Event.MOUSEDOWN); } document.onmousedown=click; // --> </script>

Questo codice blocca (solo visitando la pagina, non del tutto, don't worry!^^;)la funzione del tasto destro del mouse, facendo in modo che il ladro non possa utilizzarlo!

Ovviamente, si è già scoperto come fare per disennescarlo ma...voi fatelo lo stesso!

Come per gli altri, inseritelo dopo la scritta <\head>.

Il messaggio "Giù le zampe", apparirà, in una finestrella, ogni qualvolta che il malcapitato ladruncolo pigerà il tasto destro del mouse nella vostra pagina.

Al posto del messaggio originale, potrete metterci altri tipi di messaggi, ad esempio : STOP! ALT! Non si tocca! e cose del genere. Basta solo cambiare la scritta dopo il "var message", ed interporre la nuova frase tra le virgolette. Se invece non volete la comparsa di alcun messaggio, cancellate la scritta "var message", ed il messaggio seguente. Semplice come rubare le caramel...err, le immagini ad un sito, veh?^_^

Per ora, queste sono le mie conoscenze in fatto di codici...se avete commenti, suggerimenti, richieste o quant'altro, mandate pure il tutto al mio indirizzo e-mail.

See ya HTML nerds!^_^