Risorse per webmaster

L A   C O M U N I T À   V I R T U A L E   I T A L I A N A   P E R   W E B   M A S T E R S

 
 
      Tecnologie
      HTML
      CSS
      DHTML
      FLASH
      ASP
      PHP
      JSP
      PERL
      XML
      SMIL
      WIRELESS
      PALMARI
      APACHE
      MYSQL
      PICOSQL
 
      Grafica
 
      Servizi
 
      Raccolte
 
      Recensioni
 
      Analisi
 
      Disclaimer

   Per tutti
 
  .: Magazine
  .: Editor
  .: Appunti
  .: Gratis
  .: Scripts
  .: Components
 
   Home page

Partner
Magazine di tecnologie
Magazine di viaggio e turismo
Magazine di musica e spettacoli
Negozio di Informatica
Basilicata turismo
Food e territori
Agenzia di comunicazione turistica e Digital PR

versione stampabile Mostra una versione adatta per la stampa  

Livello di difficoltà:Livello di difficoltà: medio  
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?
 

 
 
Home > dhtml > teoria > 1999 > giugno > ...   © 1999-2018 Risorse.net, tutti i diritti riservati