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.
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");
<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.
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...