JMiur [E]

Una consulta simple me ha obligado a buscar la respuesta en la red: ¿cómo hacer que el color de fondo de un elemento de un formulario, cambie de color cuando hacemos click dentro de él y luego vuelva a su color original?

¡Ah, es simple!, pensé yo y me acordaba de haberlo implementado en los formularios de comentarios de bolsanegra. Simplemente se utiliza una de las llamadas pseudo-clases, en este caso, onfocus. Por ejemplo, definiendo las propiedades para un área de texto de esta manea:

textarea {
background-color: #FFFFE0; /* color normal */
}

textarea:focus {
background-color: #FFFFFF; /* color resaltado */}
El área de texto tiene un color amarillo, cuando hacemos click se vuelve blanco y al salir, vuelve a ser amarillo. Sencillo pero hay un problema, no funciona en Internet Explorer.

Moraleja, hay que recurrir al Google y buscar la respuesta. Por suerte, en Dynamic Drive hay un script que resuelve el tema y permite colorear los elementos de cualquier formulario cuando hacemos click dentro de ellos.


Email:



Primero que nada, alojamos el script en nuestro servidor y lo agregamos a la plantilla, dentro del encabezado, por ejemplo, antes de la etiqueta </head>:
<script src="URL_archivo" type="text/javascript"></script>
Lo vamos a utilizar, añadiendo la llamada dentro de la etiqueta form:
<form [atributos comunes]
onkeyup="highlight(event)" onclick="highlight(event)">
El script puede descargarse desde aquí y este es su contenido:
<script type="text/javascript">
var highlightcolor="COLORresaltado";
var ns6=document.getElementById&&!document.all;
var previous='';
var eventobj;
var intended=/INPUT|TEXTAREA|SELECT|OPTION/;

// verificar el elemento sobre el que se hace click
function checkel(which) {
if (which.style&&intended.test(which.tagName)) {
if (ns6&&eventobj.nodeType==3)
eventobj=eventobj.parentNode.parentNode;
return true;
} else
return false
}

// iluminar el elemento
function highlight(e){
eventobj=ns6? e.target : event.srcElement;
if (previous!='') {
if (checkel(previous))
previous.style.backgroundColor='COLORnormal';
previous=eventobj;
if (checkel(eventobj))
eventobj.style.backgroundColor=highlightcolor;
} else {
if (checkel(eventobj))
eventobj.style.backgroundColor=highlightcolor;
previous=eventobj;
}
}
</script>
Hay dos valores que indican el color y que podemos configurar a nuestro gusto:

var highlightcolor='COLORresaltado';
establece cuál será el color de fondo cuando se produce el evento, o sea, el que se mostrará cuando hacemos click dentro de él.

previous.style.backgroundColor='COLORnormal';
establece el color de fondo normal de los elementos del formulario

4 comentarios:

Oyovu  

Hola JMiur. Me pregunto si se puede hacer una especie de botón que cambie el color del fondo en blogger de blanco a negro con un clic.

Gracias de antemano.

Responder
JMiur  

Si. Un botón o un enlace aunque no sé que aprte exactamente quieres cambair. Supongamos que sea el DIV outer-wrapper:

<a href="javascript:void(0);"
onclick="document.getElementById('outer-wrapper').backgroundColor='#000';">
cambair a fondo negro
</a>

Responder
Oyovu  

Eso es exáctamente a lo que me refería: un botón o un enlace para cambiar el color del outer-wrapper a negro con un clic. Lo puse en el blog pero no me funciona... no se a que se debe. ¿Existe alguna otra forma de hacerlo? esque vi hace tiempo algo de "lights off jquery" y se conseguía el mismo efecto, similar al lightwindow.

Gracias de nuevo.

Responder
JMiur  

Habría que ver en que sitio lo quieres poner; dependerá, por ejemplo, de si existen otros divs interiores que tienen un color definido de fondo.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR