Learn script.aculo.us
script.aculo.us Resources
Selected Reading
© 2011 TutorialsPoint.COM
|
script.aculo.us Highlight Effects
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.
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. |
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.
|
|
|