script.aculo.us Highlight Effect

Last Updated : 20 Nov, 2020

The script.aculo.us library is a cross-browser library that aims to improving the user interface of a website. In this article, we will demonstrate the Highlight effect. This effect is used for making the element smoothly highlight with the customizable colors. We can adjust the duration of the effect as well.

Syntax:

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

Effect.Highlight( element, [options] )

Options: It has four objects as mentioned above and described below:

startcolor: It is used to set the color of the first frame of the effect. The default value is ”#ffff99”.
endcolor: It is used to set the color of the last frame of the effect. The default value is ”#ffffff”.
restorecolor: It is used to set the background color of the element after the effect has finished. The default value is the current background-color of the element.
keepBackgroundImage: It is used to set whether any background image on the element will be preserved or not.

To demonstrate the use of this function, we have written a small piece of code. In which we have written a small JavaScript function named ShowEffect method which uses the Highlight method of this library. The examples below demonstrate the method.

Example 1:

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <script type="text/javascript" 
        src="prototype.js"> 
    </script> 
  
    <script type="text/javascript" 
        src="scriptaculous.js"> 
    </script> 
  
    <script type="text/javascript"> 
        function ShowEffect(element) { 
  
            // Using the Highlight effect with 
            // the base options of the 
            // Effect class 
            new Effect.Highlight(element, { 
                duration: 1, 
                from: 0, 
                to: 1.0 
            }); 
        } 
    </script> 
</head> 
  
<body> 
    <h1 style="color: green;"> 
        GeeksforGeeks 
    </h1> 
  
    <h2>script.aculo.us Highlight Effect</h2> 
      
    <button onclick="ShowEffect('hideshow')"> 
        Click me to Highlight the line! 
    </button> 
      
    <br /> 
    <br /> 
    <div id="hideshow"> 
        LINE TO HIGHLIGHT 
    </div> 
</body> 
  
</html> 

Output:

Example 2:

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <script type="text/javascript" 
        src="prototype.js"> 
    </script> 
  
    <script type="text/javascript" 
        src="scriptaculous.js"> 
    </script> 
  
    <script type="text/javascript"> 
        function ShowEffect(element) { 
  
            // Using the Highlight effect with 
            // the startcolor and endcolor 
            // options of the effect 
            new Effect.Highlight(element, { 
                startcolor: '#ff0000', 
                endcolor: '#ffff00' 
            }); 
        } 
    </script> 
</head> 
  
<body> 
    <h1 style="color: green;"> 
        GeeksforGeeks 
    </h1> 
  
    <h2>script.aculo.us Highlight Effect</h2> 
      
    <button onclick="ShowEffect('geeks_1')"> 
        Click me to Highlight the line! 
    </button> 
    <br /> 
    <br /> 
    <div id="geeks_1"> 
        GeeksforGeeks 
    </div> 
</body> 
  
</html> 