Efecto highlight para destacar un elemento

  • Por
Un efecto con Mootools para hacer una iluminación o resaltado de un elemento que se quiera destacar con respuesta a las acciones del usuario.
Otro efecto típico que podemos necesitar en una web es resaltar elementos dinámicamente para llamar la atención del usuario sobre un lugar de la página. En este artículo, perteneciente al manual de Mootools, mostraremos cómo realizar este útil efecto en instantes.

Imaginaros que tenéis un enlace en la página que abre por Ajax un contenido y el usuario lo pulsa pero no se da cuenta que se ha mostrado el contenido en la página. Puede ocurrir que siga pulsando el enlace porque piense no ha recibido ninguna respuesta y al final, piense que no funciona. En casos como ese viene bien resaltar el elemento que sobre el que queremos llamar la atención del usuario.

Para ello Mootools tiene un método listo para usar y hacer un efecto de iluminación sobre un elemento en sólo una línea de código, que implementa sobre la clase Element la librería de efectos de del framework Javascript.

El método en concreto se llama highlight y lo podemos invocar de esta manera:

$("mielemento").highlight("#ccc");

El método genera un efecto de cambio gradual del color de fondo del elemento, desde su color actual hasta el color que le enviamos por parámetro, volviendo de nuevo a su color original. Si el elemento anteriormente no tenía color asignado, o si era transparente, se toma el blanco como color por defecto del elemento.

El método también puede recibir dos parámetros en lugar de uno. En ese caso, utiliza el primer parámetro como primero color de la transición de colores, el segundo parámetro como un segundo paso en la transición, luego volviendo al color original.

$("mielemento").highlight("#f07990","#ccc");

Nota: Sobre el método highlight cuando se le pasa dos parámetros, según la documentación diría que el segundo parámetro es el color que permanece después del efecto. Pero según mis pruebas luego vuelve otra vez al color original, que teníamos como fondo de ese elemento. Además, cuando le paso dos parámetros al método a veces parece que no funciona del todo bien, así que creo que es más seguro sólo utilizar un parámetro. Esto según mis pruebas con Mootools 1.2 y 1.3.
Ahora veamos un ejemplo de página que hace uso de este efecto, en la que vamos a tener una capa con contenido y dos enlaces. Definiremos un evento clic en cada enlace para que, cuando se pulsen, se llame al método highlight() pasando tanto uno como dos parámetros.

<html>
<head>
   <title>Highlight en mootools</title>
   <script src="../mootools-1.2.js" type="text/javascript"></script>
<script>
window.addEvent("domready", function(){
   //defino un evento click para el primer enlace
   $("enlacedestacar").addEvent("click", function(evento){
      evento.preventDefault();
      //invoco el método highlight sobre el elemento que quiero destacar
      $("mielemento").highlight("#ffffbb");
   });
   //defino un evento click para el segundo enlace
   $("enlacedestacar2").addEvent("click", function(evento){
      evento.preventDefault();
      //invoco el método highlight pasando dos parámetros, el color para destacar y el color final que tiene que aparecer.
      $("mielemento").highlight("#ff9900","#ccc");
   });
   
});
</script>
</head>

<body style="background-color: #000;">
<a href="#" id="enlacedestacar">Destacar</a> | <a href="#" id="enlacedestacar2">Destacar acabando en rojo oscuro</a>
<br>
<br>
<div id="mielemento" style="color: #fff; background-color: #336633; padding: 17px; width: 120px;">
Este elemento lo tenemos para jugar a hacer efectos con Mootools. Coloco algo más de texto...
</div>

</body>
</html>

Podemos ver el ejemplo en marcha en una página aparte.

Como se ha podido ver es un efecto útil y sobre todo, rápido de aplicar con Mootools. En el siguiente artículo comenzaremos a ver efectos más personalizados.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Rolando

04/8/2009
Agregar evento por JS
por que he visto muchas veces que el evento lo agregan por medio de JavaScript, y no directamente en el TAG como onclick='funcion_abc("parm");' ???

Nunca he sabido por que se hace así, o almenos en vrias partes lo hacen así, yo siempre los defino en el tag...

Existe alguna diferencia REAL?

Gracias