When user enters correct text, an image rollovers/changes
<p>I am designing a language learning site. I want to have it when someone enters text into the text box it starts to roll over certain images. Take a look at my sample below</p>

<p><a href="http://imageshack.us/photo/my-images/827/hiraganaquiz2.jpg/" rel="nofollow">http://imageshack.us/photo/my-images/827/hiraganaquiz2.jpg/</a></p>

<p>So, when the user enters "na" the first symbol highlights as you see in my sample. When he enters "ma" the second symbol should highlight/rollover. I want all the symbols to stay rolled over while the correct text is entered. so if the user types "nama" the first two symbols should be rolled over to show they got it correct and once the last correct text is entered all three will be rolled over. </p>

<p>Can this by done? I will accept advanced and simple methods.</p>
