En esta entrada veremos cómo hacer para que el usuario pueda cambiar el fondo de nuestra página web.
Si visitamos la página principal de MSN (la página ya no tiene esta opción), comprobamos en la parte superior a la derecha que existen unos cuantos colores.
Si pulsamos sobre uno de ellos, comprobaremos que la página adopta como color de fondo el que hayamos elegido.
El código necesario es el siguiente.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<LINK REL="stylesheet" TYPE="text/css" HREF="cssjs1.css">
<SCRIPT LANGUAGE="JavaScript">
<!--
var colorfondo= '#D9D9D9'; //color del fondo por defecto
function original()
{
document.bgColor = colorfondo;
}
//-->
</SCRIPT>
<TITLE>Cambio dinámico de color al hacer clic con el puntero</TITLE>
</HEAD>
<BODY LEFTMARGIN="10" BGCOLOR="#D9D9D9">
<BR>
<DIV CLASS="texto1">Cambio dinámico de color</DIV>
<BR>
<DIV CLASS="textonormal">Al hacer clic con el ratón sobre los elementos de color cambia el
color del fondo de la página </DIV>
<TABLE WIDTH="549" BORDER="0" ALIGN="center" CELLPADDING="0" CELLSPACING="10" BGCOLOR="#000000">
<BR>
<TR>
<TD ID="celda1" HEIGHT="100" STYLE="background-color:#FFFFFF;" onClick="document.bgColor='#FFFFFF'"
> </TD>
<TD ID="celda2" STYLE="background-color:#FF99CC;" onClick="document.bgColor='#FF99CC'"
> </TD>
<TD ID="celda3" STYLE="background-color:#9999FF;" onClick="document.bgColor='#9999FF'"
> </TD>
<TD ID="celda4" STYLE="background-color:#3366CC;" onClick="document.bgColor='#3366CC'"
> </TD>
</TR>
<TR>
<TD ID="celda5" HEIGHT="100" STYLE="background-color:#6666FF;" onClick="document.bgColor='#6666FF'"
> </TD>
<TD ID="celda6" STYLE="background-color:#B22222;" onClick="document.bgColor='#B22222'"
> </TD>
<TD ID="celda7" STYLE="background-color:#999999;" onClick="document.bgColor='#999999'"
> </TD>
<TD ID="celda8" STYLE="background-color:#FFCCCC;" onClick="document.bgColor='#FFCCCC'"
> </TD>
</TR>
<TR>
<TD ID="celda9" HEIGHT="100" STYLE="background-color:#33CC99;" onClick="document.bgColor='#33CC99'"
> </TD>
<TD ID="celda10" STYLE="background-color:#CCCCCC;" onClick="document.bgColor='#CCCCCC'"
> </TD>
<TD ID="celda11" STYLE="background-color:#FFFF00;" onClick="document.bgColor='#FFFF00'"
> </TD>
<TD ID="celda12" STYLE="background-color:#FFFFCC;" onClick="document.bgColor='#FFFFCC'"
> </TD>
</TR>
</TABLE>
<BR>
</BODY>
</HTML>
En este enlace tenéis el ejemplo del código anterior aplicado a una página web para comprobar el funcionamiento.
*** Hace unos meses, Telefónica decidió suprimir su servicio web por lo que todos los enlaces a mi página web de este post han sido suprimidos.
José M. García
@josem2112
El Blog de la Informática 10
No hay comentarios:
Publicar un comentario
Cualquier comentario que incluya en su contenido la dirección URL de una web o blog será reportado inmediatamente por spam y no será publicado.