Benvenuti!Quest'area,è organizzata come un'unica pagina(volevo fare un esperimento)quindi è molto grande.Consiglio una connessione veloce.E' comunque una versione Light,leggera. Qui tutti gli Argomenti sono messi casuali,solo suddivisi per categoria.Sono disponibili 5 lingue.
*************************************************************************************************************************************
*Menù*
Italian - English - French - Spanish - Deutsch
Torna a Tributemercury Website
Trucchi WinXP
WebMastering
Principio di funzionamento del link # -Inserire un commento nel codice html -Tabelle <div> con barre di scorrimento V e O
Redirezionamento di una pagina web Senza JavaScript,... in HTML temporizzato e non. - Testo Lampeggiante-Aggiungi ai Preferiti
Bloccare L'accesso ad un Link - Testo Scorrevole Orizzontale e Vericale
Curiosità
***********************************************************************************************************
Principio di Funzionamento del link
#
Inserire un Commento nel
Codice HTML Redirezionamento di
una pagina web Senza JavaScript,... in HTML (META.TAG)
temporizzato e non.
Per definire una sezione,all'inizio mettere <a name=
"quello che vuoi">Per collegare : mettere un link esterno "#quellochevuoi". Semplice , no?
Inserire
un commento nel codice html è molto semplice ; Ecco un esempio:
"<!-- Commento
-->" Puoò essere utile per
la facile consultazione del codice e per l'identazione.
Molto semplice,per farlo temporizzato inserire questo codice nel tag
head:
<meta http-equiv= "refresh"content="5;URL=http://www.sito.it">
Dove content= 5 sono i secondi.Per non farlo temporizzato,basta inserire 0 come parametro content.
Barre Di Scorrimento Verticali
e Orizzontali A volte si desidera di avere una tabella che occupi solo una parte fissa della pagina nonostante che il suo contenuto sia variabile (dinamico) oppure occupi uno spazio maggiore delle dimensioni che vogliamo assegnarle.
Esempio | Spiegazioni | |
|
Il codice per la tabella è stato inserito fra i
seguenti tag:
<div style="width:200px;height:100px;overflow-y: scroll; border:1px solid black;"> ... ... </div>
| |
| Attenzione! Per il buon funzionamento del codice la tabella deve essere inserita con la stessa ampiezza del div. Esempio di codice: <table width="100%" border=0> | ||
Esempio | Spiegazioni | ||||||||||||||||||||
| Le uniche differenze rispetto all'esempio precedente sono che:
| ||||||||||||||||||||
| ttenzione! FireFox inserisce automaticamente, se necessario, anche la barra di scorrimento verticale. | |||||||||||||||||||||
Esempio | Codice da copiare per fare una prova | |||||||||||||||||||||||||
|
Testo Lampeggiante
Ottenere un testo lampeggiante prima era molto semplice: bastava aggiungere il tag ed era fatta. Il codice era il seguente: Ecco l'effetto: Inserire il seguente script JavaScript fra i tags <head> ed </head>della pagina: Le due funzioni colore1() e colore2() si alternano per formare la scritta nei due colori che abbiamo inserito rispettivamente nelle variabili c1 e c2: in c1 il colore di sfondo della pagina (così da ottenere un effetto di spegnimento) ed in c2 il colore che si preferisce. Nella variabile codice va invece scritta la frase che si vuole far lampeggiare. In ...setTimeout("...",500), 500 rappresenta il tempo, in millisecondi, di permanenza dello stesso colore. Diminuire o aumentare tale numero a seconda della velocità che si preferisce. All'inizio, viene richiamata la funzione avvia(): dopo 500 millisecondi viene richiamata la funzione colore1(). Questa a sua volta, sempre dopo 500 millisecondi, richiama la funzione colore2(), che dopo lo stesso intervallo richiama la funzione colore1() e così via, finché la pagina è attiva.
'testo' è il nome che daremo all span. Uno span è in pratica una sorta di foglio trasparente che viene "incollato" sopra alla pagina di testo. All'interno dei tags <span> e </span> può essere inserito tutto quanto si trova normalmente in una pagina HTML, come testo, immagini, tabelle, marquees, collegamenti ipertestuali. Nel nostro esempio inseriremo la scritta. L'attributo id dà un nome allo span, che altrimenti non potrebbe essere richiamato, ad esempio, nei codici Javascript. Infine: Abbiamo già diffusamente spiegato la sintassi in altri trucchi, come ad esempio in Creare un jukebox Cambiare il tag <Body>nel seguente modo:
<BODY OnLoad="avvia()"> Infine aggiungere, nel punto in cui si vuole inserire il testo lampeggiante, la seguente riga:
<span id="testo"><b><font color=red>TESTO LAMPEGGIANTE </b> </font></span> Il codice che abbiamo inserito per ottenere questo effetto è semplificato al massimo in modo da poter essere cambiato anche dai non esperti per risultati diversi come ad esempio:
SPIEGAZIONI
PASSO UNO
<script language=javascript>
var c1='#E0E4E3'
var c2='navy'
function colore1(){
codice='<font color=' + c1+ '><b>TESTO LAMPEGGIANTE</b></font>'
if(document.all)
{
document.all('testo').innerHTML=codice;
}
else if(document.getElementById){
document.getElementById("testo").innerHTML =
codice
}
attesa = window.setTimeout("colore2()",500);
}
function colore2(){
codice='<font color=' + c2 + '><b>TESTO LAMPEGGIANTE</b></font>'
if(document.all)
{
document.all('testo').innerHTML=codice;
}
else if(document.getElementById){
document.getElementById("testo").innerHTML =codice
}
attesa = window.setTimeout("colore1()",500)
}
function avvia()
{
attesa = window.setTimeout("colore1()",500);
}
</script>
if(document.all)
....
else if(document.getElementById)
...
sono solo sistemi per inserire la sintassi accettata o da MSIE (if document.all) o dagli altri browserPASSO DUE
PASSO TRE
Abbiamo scelto i colori rosso (red) ed arancione (darlorange): cambiarli eventualmente con altri colori.
NOTA: i codici vanno inseriti fra i tags <head> ed </head>della pagina. Dopo proseguire come dal PASSO 2
Aggiungi ai preferiti
Ecco come
creare un link che aggiunga una pagina a nostro piacimento ai Preferiti o
Segnalibri (in firefox), basta inserire il seguente codice :
<script language="JavaScript">
function preferiti() {
title = "...";
url = "...";
if (window.sidebar) {
// Preferiti per Mozilla Firefox
window.sidebar.addPanel(title, url,"");
} else if( window.external ) {
// Preferiti per MSIE
window.external.AddFavorite( url, title);
}
}
</script>Poi,richiamiamolo così:
<a href="javascript:preferiti();">Aggiungi ai preferiti</a>
Bloccare un link
La nostra proposta è valida solo per utenti non esperti infatti, funzionando solo lato client può sempre essere aggirata con un minimo di conoscenze, ad esempio controllando il codice.
Comunque il metodo da noi presentato funziona come nell'esempio che segue:
Primo linkSe si clicca su "Secondo link" senza aver prima cliccato su "Primo link" si riceve un messaggio d'errore. Qualora si sia cliccato all'inizio su "Primo link" conviene aggiornare la pagina.
Inserire il seguente script JavaScript fra i tags <head> ed </head>della pagina:
| <script language=JavaScript> | Si introduce codice JavaScript |
| var flag=false | La variabile flag, di tipo boolean, all'inizio è posta a falso: vedremo che solo se si accede al primo collegamento diventa vera |
| function controlla() { | La funzione è attivata dal primo link |
| flag=true | la variabile flag diventa vera |
| nuovo=window.open('prova.htm', 'nome1') | Viene aperto il primo collegamento. Sostituire, al posto di prova.htm, il nome del file o della pagina da aprire. |
| } | parentesi di chiusura della funzione |
| function apri () { | Questa è la funzione attivata dal secondo link |
| if (flag==true) { | Se la variabile flag è vera, cioè se l'utente ha già avviato il primo collegamento... |
| nuovo= window.open('trucchini.htm', 'nome2') | ... viene aperto il secondo collegamento. Sostituire, al posto di trucchini.htm, il nome del file o della pagina da aprire. |
| } | parentesi di chiusura della selezione |
| else { | Altrimenti |
| window.alert('Prima devi avviare il precedente collegamento') | si riceve il messaggio di avviso: 'Prima devi avviare il precedente collegamento' |
| } | parentesi di chiusura di "altrimenti" |
| } | parentesi di chiusura della funzione apri |
| </script> | Fine script |
Inserire, nel punto desiderato,:
<a href="javascript: controlla()"> Primo link
</a>
<a href="javascript: apri()">Secondo
link</a>
Ovviamente sostituire sia al
posto di Primo link che di Secondo link la parola o la frase calda
che si preferisce.
Testo Scorrevole
Supponiamo ora di voler inserire nel testo scorrevole dei collegamenti, ad esempio alle novità del sito (come esempio abbiamo inserito tutto il blocco delle novità del giorno 22/2/2004)
Si può provare ad avvicinare il mouse al testo scorrevole e si vede che esso si ferma, mentre riprende a scorrere non appena il mouse si allontana. Per ottenere il risultato basta aggiungere il seguente codice:
<marquee OnMouseOver="javascript:this.stop()" OnMouseOut="javascript:this.start()"> ...</marquee> Al posto dei puntini si inserisce il testo che deve scorrere, completo di tag per andare a capo, link e così via.Per migliorare l'aspetto del testo scorrevole senza troppe complicazioni è possibile inserirlo in una tabella di cui si può scegliere, ad esempio, la dimensione e il colore di sfondo, come nel seguente esempio: