- Highlight Effect



The Highlight effect is used to call attention to the target element by changing its background color.

Without any options, the background color of the element will change to yellow, and then, throughout the course of the effect duration, morph back into the original background color.


You can use one of the following two forms to use this effect −

new Effect.Highlight('id_of_element', [options]);


new Effect.Highlight(element, [options]);

Effect-Specific Parameters

This effect has the following parameters in addition to the common parameters.

Option Description
startcolor Sets the starting color of the element's background. If omitted, a light yellow color is used.
endcolor Sets the ending color of the element's background. If omitted, the original background color of the element is used if it can be determined. Otherwise, the default is white.
restorecolor Sets the final color of the background after the effect has completed.


      <title> examples</title>
      <script type="text/javascript" src="/javascript/prototype.js"></script>
      <script type="text/javascript" src="/javascript/scriptaculous.js?load=effects"></script>
      <script type="text/javascript">
         function HighlightEffect(element){
            new Effect.Highlight(element, 
               {startcolor: "#ff0000", endcolor: "#0000ff", restorecolor: "#00ff00", duration: 8 })
      <div onclick="HighlightEffect(this)">
         Click me to see the result of Highlight Method

This rather jarring use of Highlight changes the background color of the element to red, then morphs that background color to blue over the course of 8 seconds, displaying some interesting shades of purple along the way. After the color morph has been completed, the background color of the element is set to green.

This will produce following result −