JAVASCRIPT - Cambia color de fondo con la paleta

Cambia color de fondo con la paleta

Compatibilidad: Ms Internet Explorer, Netscape
A partir de una paleta de colores, este script cambia el color del fondo pasando el ratón por los diversos colores.

[ Muestra el ejemplo práctico ]

el código para insertar en tu página

<TITLE>Ejemplos Javascript: ejemplo práctico </TITLE>

lck=0;
        
        function r(hval)
        {
                if ( lck == 0 )
                {
                        document.bgColor=hval;
                        document.f.c.value=hval;
                }
        }
        
        function l()
        {
                if (lck == 0)
                        {
                                lck = 1;
                
                        }
                else
                        {
                                lck = 0;
                                
                        }
        }
</script>

</HEAD>

</tr>
<tr>
        <td bgcolor="#990000"><a href="JavaScript:l()"
onmouseover="r('#990000'); return true"><img src="w.gif" height=10
width=10 border=0></a></td>
        <td bgcolor="#990033"><a href="JavaScript:l()"
onmouseover="r('#990033'); return true"><img src="w.gif" height=10
width=10 border=0></a></td>
        <td bgcolor="#990066"><a href="JavaScript:l()"
onmouseover="r('#990066'); return true"><img src="w.gif" height=10
width=10 border=0></a></td>
        <td bgcolor="#990099"><a href="JavaScript:l()"
onmouseover="r('#990099'); return true"><img src="w.gif" height=10
width=10 border=0></a></td>
        <td bgcolor="#9900cc"><a href="JavaScript:l()"
onmouseover="r('#9900cc'); return true"><img src="w.gif" height=10
width=10 border=0></a></td>
        <td bgcolor="#9900ff"><a href="JavaScript:l()"
onmouseover="r('#9900ff'); return true"><img src="w.gif" height=10
width=10 border=0></a></td>
        <td bgcolor="#996600"><a href="JavaScript:l()"
onmouseover="r('#996600'); return true"><img src="w.gif" height=10
width=10 border=0></a></td>
        <td bgcolor="#996633"><a href="JavaScript:l()"
onmouseover="r('#996633'); return true"><img src="w.gif" height=10
width=10 border=0></a></td>
        <td bgcolor="#996666"><a href="JavaScript:l()"
onmouseover="r('#996666'); return true"><img src="w.gif" height=10
width=10 border=0></a></td>
        <td bgcolor="#996699"><a href="JavaScript:l()"
onmouseover="r('#996699'); return true"><img src="w.gif" height=10
width=10 border=0></a></td>
        <td bgcolor="#9966cc"><a href="JavaScript:l()"
onmouseover="r('#9966cc'); return true"><img src="w.gif" height=10
width=10 border=0></a></td>
        <td bgcolor="#9966ff"><a href="JavaScript:l()"
onmouseover="r('#9966ff'); return true"><img src="w.gif" height=10
width=10 border=0></a></td>
        <td bgcolor="#99cc00"><a href="JavaScript:l()"
onmouseover="r('#99cc00'); return true"><img src="w.gif" height=10
width=10 border=0></a></td>
        <td bgcolor="#99cc33"><a href="JavaScript:l()"
onmouseover="r('#99cc33'); return true"><img src="w.gif" height=10
width=10 border=0></a></td>
        <td bgcolor="#99cc66"><a href="JavaScript:l()"
onmouseover="r('#99cc66'); return true"><img src="w.gif" height=10
width=10 border=0></a></td>
        <td bgcolor="#99cc99"><a href="JavaScript:l()"
onmouseover="r('#99cc99'); return true"><img src="w.gif" height=10
width=10 border=0></a></td>
        <td bgcolor="#99cccc"><a href="JavaScript:l()"
onmouseover="r('#99cccc'); return true"><img src="w.gif" height=10
width=10 border=0></a></td>
        <td bgcolor="#99ccff"><a href="JavaScript:l()"
onmouseover="r('#99ccff'); return true"><img src="w.gif" height=10
width=10 border=0></a></td>

</tr>
<tr>
        <td bgcolor="#993300"><a href="JavaScript:l()"
onmouseover="r('#993300'); return true"><img src="w.gif" height=10
width=10 border=0></a></td>
        <td bgcolor="#993333"><a href="JavaScript:l()"
onmouseover="r('#993333'); return true"><img src="w.gif" height=10
width=10 border=0></a></td>
        <td bgcolor="#993366"><a href="JavaScript:l()"
onmouseover="r('#993366'); return true"><img src="w.gif" height=10
width=10 border=0></a></td>
        <td bgcolor="#993399"><a href="JavaScript:l()"
onmouseover="r('#993399'); return true"><img src="w.gif" height=10
width=10 border=0></a></td>
        <td bgcolor="#9933cc"><a href="JavaScript:l()"
onmouseover="r('#9933cc'); return true"><img src="w.gif" height=10
width=10 border=0></a></td>
        <td bgcolor="#9933ff"><a href="JavaScript:l()"
onmouseover="r('#9933ff'); return true"><img src="w.gif" height=10
width=10 border=0></a></td>
        <td bgcolor="#999900"><a href="JavaScript:l()"
onmouseover="r('#999900'); return true"><img src="w.gif" height=10
width=10 border=0></a></td>
        <td bgcolor="#999933"><a href="JavaScript:l()"
onmouseover="r('#999933'); return true"><img src="w.gif" height=10
width=10 border=0></a></td>
        <td bgcolor="#999966"><a href="JavaScript:l()"
onmouseover="r('#999966'); return true"><img src="w.gif" height=10
width=10 border=0></a></td>
        <td bgcolor="#999999"><a href="JavaScript:l()"
onmouseover="r('#999999'); return true"><img src="w.gif" height=10
width=10 border=0></a></td>
        <td bgcolor="#9999cc"><a href="JavaScript:l()"
onmouseover="r('#9999cc'); return true"><img src="w.gif" height=10
width=10 border=0></a></td>
        <td bgcolor="#9999ff"><a href="JavaScript:l()"
onmouseover="r('#9999ff'); return true"><img src="w.gif" height=10
width=10 border=0></a></td>
        <td bgcolor="#99ff00"><a href="JavaScript:l()"
onmouseover="r('#99ff00'); return true"><img src="w.gif" height=10
width=10 border=0></a></td>
        <td bgcolor="#99ff33"><a href="JavaScript:l()"
onmouseover="r('#99ff33'); return true"><img src="w.gif" height=10
width=10 border=0></a></td>
        <td bgcolor="#99ff66"><a href="JavaScript:l()"
onmouseover="r('#99ff66'); return true"><img src="w.gif" height=10
width=10 border=0></a></td>
        <td bgcolor="#99ff99"><a href="JavaScript:l()"
onmouseover="r('#99ff99'); return true"><img src="w.gif" height=10
width=10 border=0></a></td>
        <td bgcolor="#99ffcc"><a href="JavaScript:l()"
onmouseover="r('#99ffcc'); return true"><img src="w.gif" height=10
width=10 border=0></a></td>
        <td bgcolor="#99ffff"><a href="JavaScript:l()"
onmouseover="r('#99ffff'); return true"><img src="w.gif" height=10
width=10 border=0></a></td>

</tr>
<tr>
        <td bgcolor="#cc0000"><a href="JavaScript:l()"
onmouseover="r('#cc0000'); return true"><img src="w.gif" height=10
width=10 border=0></a></td>
        <td bgcolor="#cc0033"><a href="JavaScript:l()"
onmouseover="r('#cc0033'); return true"><img src="w.gif" height=10
width=10 border=0></a></td>
        <td bgcolor="#cc0066"><a href="JavaScript:l()"
onmouseover="r('#cc0066'); return true"><img src="w.gif" height=10
width=10 border=0></a></td>
        <td bgcolor="#cc0099"><a href="JavaScript:l()"
onmouseover="r('#cc0099'); return true"><img src="w.gif" height=10
width=10 border=0></a></td>
        <td bgcolor="#cc00cc"><a href="JavaScript:l()"
onmouseover="r('#cc00cc'); return true"><img src="w.gif" height=10
width=10 border=0></a></td>
        <td bgcolor="#cc00ff"><a href="JavaScript:l()"
onmouseover="r('#cc00ff'); return true"><img src="w.gif" height=10
width=10 border=0></a></td>
        <td bgcolor="#cc6600"><a href="JavaScript:l()"
onmouseover="r('#cc6600'); return true"><img src="w.gif" height=10
width=10 border=0></a></td>
        <td bgcolor="#cc6633"><a href="JavaScript:l()"
onmouseover="r('#cc6633'); return true"><img src="w.gif" height=10
width=10 border=0></a></td>
        <td bgcolor="#cc6666"><a href="JavaScript:l()"
onmouseover="r('#cc6666'); return true"><img src="w.gif" height=10
width=10 border=0></a></td>
        <td bgcolor="#cc6699"><a href="JavaScript:l()"
onmouseover="r('#cc6699'); return true"><img src="w.gif" height=10
width=10 border=0></a></td>
        <td bgcolor="#cc66cc"><a href="JavaScript:l()"
onmouseover="r('#cc66cc'); return true"><img src="w.gif" height=10
width=10 border=0></a></td>
        <td bgcolor="#cc66ff"><a href="JavaScript:l()"
onmouseover="r('#cc66ff'); return true"><img src="w.gif" height=10
width=10 border=0></a></td>
        <td bgcolor="#cccc00"><a href="JavaScript:l()"
onmouseover="r('#cccc00'); return true"><img src="w.gif" height=10
width=10 border=0></a></td>
        <td bgcolor="#cccc33"><a href="JavaScript:l()"
onmouseover="r('#cccc33'); return true"><img src="w.gif" height=10
width=10 border=0></a></td>
        <td bgcolor="#cccc66"><a href="JavaScript:l()"
onmouseover="r('#cccc66'); return true"><img src="w.gif" height=10
width=10 border=0></a></td>
        <td bgcolor="#cccc99"><a href="JavaScript:l()"
onmouseover="r('#cccc99'); return true"><img src="w.gif" height=10
width=10 border=0></a></td>
        <td bgcolor="#cccccc"><a href="JavaScript:l()"
onmouseover="r('#cccccc'); return true"><img src="w.gif" height=10
width=10 border=0></a></td>
        <td bgcolor="#ccccff"><a href="JavaScript:l()"
onmouseover="r('#ccccff'); return true"><img src="w.gif" height=10
width=10 border=0></a></td>

</tr>
<tr>
        <td bgcolor="#cc3300"><a href="JavaScript:l()"
onmouseover="r('#cc3300'); return true"><img src="w.gif" height=10
width=10 border=0></a></td>
        <td bgcolor="#cc3333"><a href="JavaScript:l()"
onmouseover="r('#cc3333'); return true"><img src="w.gif" height=10
width=10 border=0></a></td>
        <td bgcolor="#cc3366"><a href="JavaScript:l()"
onmouseover="r('#cc3366'); return true"><img src="w.gif" height=10
width=10 border=0></a></td>
        <td bgcolor="#cc3399"><a href="JavaScript:l()"
onmouseover="r('#cc3399'); return true"><img src="w.gif" height=10
width=10 border=0></a></td>
        <td bgcolor="#cc33cc"><a href="JavaScript:l()"
onmouseover="r('#cc33cc'); return true"><img src="w.gif" height=10
width=10 border=0></a></td>
        <td bgcolor="#cc33ff"><a href="JavaScript:l()"
onmouseover="r('#cc33ff'); return true"><img src="w.gif" height=10
width=10 border=0></a></td>
        <td bgcolor="#cc9900"><a href="JavaScript:l()"
onmouseover="r('#cc9900'); return true"><img src="w.gif" height=10
width=10 border=0></a></td>
        <td bgcolor="#cc9933"><a href="JavaScript:l()"
onmouseover="r('#cc9933'); return true"><img src="w.gif" height=10
width=10 border=0></a></td>
        <td bgcolor="#cc9966"><a href="JavaScript:l()"
onmouseover="r('#cc9966'); return true"><img src="w.gif" height=10
width=10 border=0></a></td>
        <td bgcolor="#cc9999"><a href="JavaScript:l()"
onmouseover="r('#cc9999'); return true"><img src="w.gif" height=10
width=10 border=0></a></td>
        <td bgcolor="#cc99cc"><a href="JavaScript:l()"
onmouseover="r('#cc99cc'); return true"><img src="w.gif" height=10
width=10 border=0></a></td>
        <td bgcolor="#cc99ff"><a href="JavaScript:l()"
onmouseover="r('#cc99ff'); return true"><img src="w.gif" height=10
width=10 border=0></a></td>
        <td bgcolor="#ccff00"><a href="JavaScript:l()"
onmouseover="r('#ccff00'); return true"><img src="w.gif" height=10
width=10 border=0></a></td>
        <td bgcolor="#ccff33"><a href="JavaScript:l()"
onmouseover="r('#ccff33'); return true"><img src="w.gif" height=10
width=10 border=0></a></td>
        <td bgcolor="#ccff66"><a href="JavaScript:l()"
onmouseover="r('#ccff66'); return true"><img src="w.gif" height=10
width=10 border=0></a></td>
        <td bgcolor="#ccff99"><a href="JavaScript:l()"
onmouseover="r('#ccff99'); return true"><img src="w.gif" height=10
width=10 border=0></a></td>
        <td bgcolor="#ccffcc"><a href="JavaScript:l()"
onmouseover="r('#ccffcc'); return true"><img src="w.gif" height=10
width=10 border=0></a></td>
        <td bgcolor="#ccffff"><a href="JavaScript:l()"
onmouseover="r('#ccffff'); return true"><img src="w.gif" height=10
width=10 border=0></a></td>

</tr>

</tr>
<tr>
        <td bgcolor="#ff3300"><a href="JavaScript:l()"
onmouseover="r('#ff3300'); return true"><img src="w.gif" height=10
width=10 border=0></a></td>
        <td bgcolor="#ff3333"><a href="JavaScript:l()"
onmouseover="r('#ff3333'); return true"><img src="w.gif" height=10
width=10 border=0></a></td>
        <td bgcolor="#ff3366"><a href="JavaScript:l()"
onmouseover="r('#ff3366'); return true"><img src="w.gif" height=10
width=10 border=0></a></td>
        <td bgcolor="#ff3399"><a href="JavaScript:l()"
onmouseover="r('#ff3399'); return true"><img src="w.gif" height=10
width=10 border=0></a></td>
        <td bgcolor="#ff33cc"><a href="JavaScript:l()"
onmouseover="r('#ff33cc'); return true"><img src="w.gif" height=10
width=10 border=0></a></td>
        <td bgcolor="#ff33ff"><a href="JavaScript:l()"
onmouseover="r('#ff33ff'); return true"><img src="w.gif" height=10
width=10 border=0></a></td>
        <td bgcolor="#ff9900"><a href="JavaScript:l()"
onmouseover="r('#ff9900'); return true"><img src="w.gif" height=10
width=10 border=0></a></td>
        <td bgcolor="#ff9933"><a href="JavaScript:l()"
onmouseover="r('#ff9933'); return true"><img src="w.gif" height=10
width=10 border=0></a></td>
        <td bgcolor="#ff9966"><a href="JavaScript:l()"
onmouseover="r('#ff9966'); return true"><img src="w.gif" height=10
width=10 border=0></a></td>
        <td bgcolor="#ff9999"><a href="JavaScript:l()"
onmouseover="r('#ff9999'); return true"><img src="w.gif" height=10
width=10 border=0></a></td>
        <td bgcolor="#ff99cc"><a href="JavaScript:l()"
onmouseover="r('#ff99cc'); return true"><img src="w.gif" height=10
width=10 border=0></a></td>
        <td bgcolor="#ff99ff"><a href="JavaScript:l()"
onmouseover="r('#ff99ff'); return true"><img src="w.gif" height=10
width=10 border=0></a></td>
        <td bgcolor="#ffff00"><a href="JavaScript:l()"
onmouseover="r('#ffff00'); return true"><img src="w.gif" height=10
width=10 border=0></a></td>
        <td bgcolor="#ffff33"><a href="JavaScript:l()"
onmouseover="r('#ffff33'); return true"><img src="w.gif" height=10
width=10 border=0></a></td>
        <td bgcolor="#ffff66"><a href="JavaScript:l()"
onmouseover="r('#ffff66'); return true"><img src="w.gif" height=10
width=10 border=0></a></td>
        <td bgcolor="#ffff99"><a href="JavaScript:l()"
onmouseover="r('#ffff99'); return true"><img src="w.gif" height=10
width=10 border=0></a></td>
        <td bgcolor="#ffffcc"><a href="JavaScript:l()"
onmouseover="r('#ffffcc'); return true"><img src="w.gif" height=10
width=10 border=0></a></td>
        <td bgcolor="#ffffff"><a href="JavaScript:l()"
onmouseover="r('#ffffff'); return true"><img src="w.gif" height=10
width=10 border=0></a></td>
</tr>
</table>

</body>
</html>

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