Stačí, ak pridáte nasledujúci kód medzi značky <head> </head> v hlavičke webovej stránky.
<script type="text/javascript">
function setXY(x)
{
document.getElementById(x).style.background="#FFFF00";
}
</script>
Vnútri tela stránky medzi značkami <body>… </body> môžete následne pripojiť tento skript k ľubovoľnej udalosti naviazanej na prvok <input>. V tomto príklade použijeme udalosti onfocus a onmouseover.
Pre vstupné pole:
<input type='text' ID="INP" name="input_1" onfocus='setXY(this.id)' onblur='setLo(this.id)' >
Pozn.: Keďže skript používa metódu getElementById, je veľmi dôležité, aby ste každému vstupnému poľu priradili jedinečný "ID" atribút. Bez neho vám to nebude fungovať.
Môžete byť kreatívni a skombinovať viaceré techniky na zvýraznenie efektu, kedy sa myšou dostanete nad vstupné pole alebo preč (napr. reverzné menenie farby na pôvodnú).
V príklade uvedenom nižšie použijeme metódu setHi(x) na farebné zvýraznenie a setLo(x) na zrušenie zvýraznenia. A tu je výsledný kód:
<html>
<head>
<script type="text/javascript">
function setHi(x)
{ document.getElementById(x).style.background="#FF0000"; }
function setLo(x)
{ document.getElementById(x).style.background="#FFFFFF"; }
</script>
</head>
<body>
<B>sample text input</B><BR><BR>
<form>
<input type='text' ID="INP_1" name="input_1" onmouseover='setHi(this.id)' onmouseout='setLo(this.id)' > <BR><BR>
</form>
</body>
</html>
