Copyright © tutorialspoint.com

script.aculo.us Highlight Effects

previous next


Advertisements

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 following parameters in addition to common parameters.

OptionDescription
startcolorSets 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.
restorecolorSets the final color of the background after the effect has completed.

Example:

<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 completed, the background color of the element is set to green.

To understand it in better way you can Try it yourself.


previous next

Copyright © tutorialspoint.com