HIGHLIGHT

Here the Javascript code available to be inserted in your web pages to implement the highlight functionalities of their html elements.

Please check the context of implementation for each of the functions.



Code:

/**
 * SQJS.highlightDiv
 * 
 * Highlight the current DIV element
 *
 * context:
 * - call this function in the <onmouseenter> event 
 * 
 * @param {Element}  tthis, the current DIV element (<this> on the function call)
 * @returns {void}
 */
 function SQJS.highlightDiv(tthis){};

/**
 * SQJS.unlightDiv
 * 
 * Unlight the current DIV element
 * 
 * Context:
 * - call this function in the <onmouseleave> event 
 * 
 * @param {Element} tthis, the current DIV element (this on the function call)
 * @returns {void}
 */
function SQJS.unlightDiv(tthis){};

/**
 * SQJS.highlightInput
 * 
 * Highlight the current INPUT element
 * 
 * Context:
 * - call this function in the <onmouseenter> event 
 * 
 * @param {Element} tthis, the current INPUT element (this on the function call)
 * @returns {void}
 */
function SQJS.highlightInput(tthis){};

/**
 * SQJS.unlightInput
 * 
 * Unlight the current INPUT element
 * 
 * Context:
 * - call this function in the <onmouseleave> event 
 * 
 * @param {Element} tthis, the current INPUT element (this on the function call)
 * @returns {void}
 */
function SQJS.unlightInput(tthis){};

/**
 * SQJS.highlightInput
 * 
 * Highlight the current TEXTAREA element
 * 
 * Context:
 * - call this function in the <onmouseenter> event 
 * 
 * @param {Element} tthis, the current TEXTAREA element (this on the function call)
 * @returns {void}
 */
function SQJS.highlightTextArea(tthis){};

/**
 * SQJS.unlightTextArea
 * 
 * Highlight the current TEXTAREA element
 * 
 * Context:
 * - call this function in the <onmouseleave> event 
 * 
 * @param {Element} tthis, the current TEXTAREA element (this on the function call)
 * @returns {void}
 */
function SQJS.unlightTextArea(tthis){};


Usage example:


    <div id="content" onmouseenter="SQJS.highlightDiv(this);" onmouseleave="SQJS.unlightDiv(this);" style="max-width:450px; width:100%; padding:35px;">
        <input type="text" id="txtName" onmouseenter="SQJS.highlightInput(this);" onmouseleave="SQJS.unlightInput(this);" value="Capitan Cloud">
        <input type="text" id="txtCompany" onmouseenter="SQJS.highlightInput(this);" onmouseleave="SQJS.unlightInput(this);" value="5 Mode">
        <input type="text" id="txtEmail" onmouseenter="SQJS.highlightInput(this);" onmouseleave="SQJS.unlightInput(this);" value="my25mb@aol.com">
        <textarea style="height:150px;width:300px;resize:none;" onmouseenter="SQJS.highlightTextArea(this);" onmouseleave="SQJS.unlightTextArea(this);"></textarea>
    </div>


How it looks like: