Livello di difficoltà: |
|
Dynamic Html è una tecnologia approvata dal W3C per la creazione di siti Web dinamici ed interazioni client side con l'utente. In questa sezione sono disponibili centinaia di esempi ed arretrati della mailing list "Una demo Dhtml a settimana".
|
| |
Il colore di sfondo che cambia con onmouseover
Arretrati lista "Una demo Dhtml a settimana"
CONOSCENZE CONSIGLIATE PER QUESTO ARTICOLO: Html, Javascript
COMPATIBILITÀ: Ms Ie, Netscape
FILES ESTERNI: Nessuno
Visualizza la demo
Scarica la demo
Una tentazione che molti webmaster vorrebbero soddisfare, consiste nel
permettere ai propri visitatori di cambiare il colore di sfondo del sito, in modo semplice ed intuitivo. L'effetto che vi mostriamo questa settimana soddisfa proprio queste persone e garantiamo inoltre la semplicità della demo.
Ma vediamo di cominciare a esaminare il codice dello script:
<script language="JavaScript">
lck=0;
function r(hval)
{
if ( lck == 0 )
{
document.bgColor=hval;
}
}
function l()
{
if (lck == 0)
{
lck = 1;
}
else
{
lck = 0;
}
}
</script>
Questa prima porzione di sorgente, va inserita tra i tag <head> e </head> e serve proprio a permettere il cambio del colore di sfondo.
Una volta impostato il Javascript, è necessario richiamarlo nel corpo del documento:
<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=2 BORDER=0><TR>
<TD BGCOLOR="#996600"><a href="JavaScript:l()"
onmouseover="r('#996600'); return true"><IMG SRC="/images/spazio.gif"
WIDTH=10 HEIGHT=10 BORDER=0></A></TD>
<TD BGCOLOR="#663399"><a href="JavaScript:l()"
onmouseover="r('#663399'); return true"><IMG SRC="/images/spazio.gif"
WIDTH=10 HEIGHT=10 BORDER=0></A></TD>
<TD BGCOLOR="#669933"><a href="JavaScript:l()"
onmouseover="r('#669933'); return true"><IMG SRC="/images/spazio.gif"
WIDTH=10 HEIGHT=10 BORDER=0></A></TD>
<TD BGCOLOR="#990033"><a href="JavaScript:l()"
onmouseover="r('#990033'); return true"><IMG SRC="/images/spazio.gif"
WIDTH=10 HEIGHT=10 BORDER=0></A></TD>
<TD BGCOLOR="#666600"><a href="JavaScript:l()"
onmouseover="r('#666600'); return true"><IMG SRC="/images/spazio.gif"
WIDTH=10 HEIGHT=10 BORDER=0></A></TD>
<TD BGCOLOR="#663366"><a href="JavaScript:l()"
onmouseover="r('#663366'); return true"><IMG SRC="/images/spazio.gif"
WIDTH=10 HEIGHT=10 BORDER=0></A></TD>
<TD BGCOLOR="#000000"><a href="JavaScript:l()"
onmouseover="r('#000000'); return true"><IMG SRC="/images/spazio.gif"
WIDTH=10 HEIGHT=10 BORDER=0></A></TD>
<TD BGCOLOR="#CC6600"><a href="JavaScript:l()"
onmouseover="r('#CC6600'); return true"><IMG SRC="/images/spazio.gif"
WIDTH=10 HEIGHT=10 BORDER=0></A></TD>
<TD BGCOLOR="#CC3399"><a href="JavaScript:l()"
onmouseover="r('#CC3399'); return true"><IMG SRC="/images/spazio.gif"
WIDTH=10 HEIGHT=10 BORDER=0></A></TD>
<TD BGCOLOR="#666699"><a href="JavaScript:l()"
onmouseover="r('#666699'); return true"><IMG SRC="/images/spazio.gif"
WIDTH=10 HEIGHT=10 BORDER=0></A></TD>
<TD BGCOLOR="#660033"><a href="JavaScript:l()"
onmouseover="r('#660033'); return true"><IMG SRC="/images/spazio.gif"
WIDTH=10 HEIGHT=10 BORDER=0></A></TD>
<TD BGCOLOR="#330033"><a href="JavaScript:l()"
onmouseover="r('#330033'); return true"><IMG SRC="/images/spazio.gif"
WIDTH=10 HEIGHT=10 BORDER=0></A></TD>
<TD BGCOLOR="#333300"><a href="JavaScript:l()"
onmouseover="r('#333300'); return true"><IMG SRC="/images/spazio.gif"
WIDTH=10 HEIGHT=10 BORDER=0></A></TD>
<TD BGCOLOR="#9900CC"><a href="JavaScript:l()"
onmouseover="r('#9900CC'); return true"><IMG SRC="/images/spazio.gif"
WIDTH=10 HEIGHT=10 BORDER=0></A></TD>
<TD BGCOLOR="#FFCC66"><a href="JavaScript:l()"
onmouseover="r('#FFCC66'); return true"><IMG SRC="/images/spazio.gif"
WIDTH=10 HEIGHT=10 BORDER=0></A></TD>
</TR></TABLE>
Come si può facilmente intuire, qui viene creata la tabella che conterrà i vari colori di sfondo. In ogni cella, è presente il richiamo a un'immagine grande 10x10. La gif però, può anche non essere presente (come abbiamo fatto noi), l'importante è che ci sia il tag <img src="una/gif/anche/inesistente" height=10 width=10>, in modo da permettere la visualizzazione del colore della cella, che sarà anche quella di sfondo se l'utente ci passasse sopra con il puntatore.
Tutto qui! La demo è completata. Era semplice, vero?
|
