script.aculo.us - Highlight Effect

Description

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.

Syntax

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

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

Effect-Specific Parameters

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

Sr.No Option & Description
1

startcolor

Sets the starting color of the element's background. If omitted, a light yellow color is used.
2

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.
3

restorecolor

Sets the final color of the background after the effect has completed.

Example

Live Demo 
<html>
   <head>
      <title>script.aculo.us 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 
               }
            )
         }
      </script>
   </head>
   
   <body>
      <div onclick = "HighlightEffect(this)">
         Click me to see the result of Highlight Method
      </div>
   </body>
</html>

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 −

scriptaculous_effects.htm
Advertisements