Demo Dynamic HTML - Cambio dinámico del background

Cambio del background

Compatibilidad: Ms Internet Explorer

Esta demo modifica el color del fondo de un documento web simplemente haciendo clic en una paleta de colores.

[ Muestra el ejemplo práctico ]

el código para insertar en tu página

<TITLE>Demo Dynamic HTML: ejemplo práctico </TITLE>

<LINK REL="stylesheet" HREF="../samples.css" TYPE="text/css"> 
      <STYLE TYPE="text/css">
         TABLE {background:white}
         /* Make all cells a uniform size. */
         TD {width:30pt; height:30pt; cursor:default}
      </STYLE>
   </HEAD>
   
<BODY>

<CENTER>      
<H1>Color Selector</H1>

<DIV ONCLICK="colorSelector()">
         <SCRIPT LANGUAGE="JavaScript">
            function colorSelector() {
               // Based on the table, change to the correct color.
               // srcElement is the element the user clicked on.
               if ("TD" == event.srcElement.tagName)
                  if (document.all.Text.contains(event.srcElement))
                     document.fgColor = event.srcElement.bgColor;
                  else if (document.all.Background.contains(
                        event.srcElement))
                     document.bgColor = event.srcElement.bgColor;
            }
         </SCRIPT>

<TABLE ID="Background" BORDER>
            <CAPTION>Background Color</CAPTION>
            <TR>
               <TD BGCOLOR=Black></TD><TD BGCOLOR=Red></TD>
               <TD BGCOLOR=Green></TD><TD BGCOLOR=LightBlue></TD>
               <TD BGCOLOR=Yellow></TD>
            </TR>
            <TR>
               <TD BGCOLOR=YellowGreen></TD><TD BGCOLOR=Orange></TD>
               <TD BGCOLOR=Navy></TD><TD BGCOLOR=Magenta></TD>
               <TD BGCOLOR=Brown></TD>
            </TR>
            <TR>
               <TD BGCOLOR=Black></TD><TD BGCOLOR=Blue></TD>
               <TD BGCOLOR=Burlywood></TD><TD BGCOLOR=Gold></TD>
               <TD BGCOLOR=Cyan></TD>
            </TR>
         </TABLE>
         <TABLE ID="Text" BORDER>
            <CAPTION>Text Color</CAPTION>
            <TR>
               <TD BGCOLOR=Black></TD><TD BGCOLOR=Red></TD>
               <TD BGCOLOR=Green></TD><TD BGCOLOR=LightBlue></TD>
               <TD BGCOLOR=Brown></TD>
            </TR>
            <TR>
               <TD BGCOLOR=White></TD><TD BGCOLOR=Blue></TD>
               <TD BGCOLOR=Burlywood></TD><TD BGCOLOR=Gold></TD>
               <TD BGCOLOR=Cyan></TD>
            </TR>
         </TABLE>
      </DIV></CENTER>

</BODY>
</HTML>

[Baja en un único archivo .zip, las imágenes y demás archivos necesarios
para el funcionamiento de las demo de esta sección]