Tal y como viene preconfigurado, el efecto Resaltado de Spry en Dreamweaver sólo ofrece la posibilidad de cambiar progresivamente de color en una dirección. Vamos a enseñarte a conseguir que el efecto resultante sea progresivo también para volver al color original modificando una sóla línea de código. De paso, aprenderemos algo más sobre las posibilidades de llamar a funciones callback mediante las opciones ‘setup’ y ‘finish’.

Además de los atributos que necesiten, los efectos de Spry también son capaces de invocar a funciones callback antes de comenzar y una vez ha terminado de ejecutarse. Para acceder a ellos, sólamente es necesario invocar dentro del constructor del efecto a las opciones ‘setup’ y ‘finish’.

Vamos a aplicarlo al efecto resaltado de Spry que viene incluido en DW CS3. En su aspecto por defecto, en DW encontraremos este codigo. Incluye el enlace archivo SpryEffects.js que carga los efectos y una función (MM_effectHighlight) que acepta como parámetros:

  • Elemento para el efecto
  • Duración
  • Color de inicio
  • Color durante la transición
  • Color final
  • Si el efecto se realizará al revés en su próxima llamada por el usuario (al volver a hacer click de nuevo, por ejemplo)

Este efecto se encuentra en el panel de Etiquetas -> pestaña Comportamientos -> Efectos -> Resaltado

El código que se creará es el siguiente:
[js]
<script src="/SpryAssets/SpryEffects.js" type="text/javascript"></script>
<script type="text/javascript">
function MM_effectHighlight(targetElement, duration, startColor, endColor, restoreColor, toggle){
Spry.Effect.DoHighlight(targetElement, {duration: duration, from: startColor, to: endColor, restoreColor: restoreColor, toggle: toggle});
}
….
<div onclick="MM_effectHighlight(this, 1000, ‘#FFFFFF’, ‘#0099FF’, ‘#0099FF’, false)">Click Me</div>
[/js]

Y este es el efecto resultante:

Haz click aqui para ver el efecto original en este parrafo

Como se puede ver, el efecto no realiza una transición hasta su color de origen. Como mucho, podemos cambiar toggle a ‘true’ para que haga el efecto inverso cuando volvamos a pulsar.

Aquí es donde entran los atributos ‘setup’ y ‘finish’. En nuestro script vamos a capturar el momento en el que el efecto termina para que cree inmediatamente después un efecto con los colores inversos. Para distinguirla de la original, le hemos cambiado el nombre de MM_efectHighlight a TCN_effectHighlight:



....

Click Me

Es decir, le hemos añadido la opción finish al constructor y le asignamos como valor una nueva función que realizará el mismo efecto pero al revés (from: endColor, to: startColor, restoreColor: startColor).

El resultado en este caso es el que deseamos:

Haz click aqui para ver el nuevo efecto en este parrafo

En caso de utilizar setup, la función que le asignemos será ejecutada antes de comenzar el efecto.

Como nota final, Spry ofrece la posibilidad de crear clusteres de efectos que pueden ejecutarse de forma simultánea o uno después de otro. Lo veremos en el futuro.