javascript - how to make password textbox value visible when hover an icon -

good day all,

i have form has password field

<input type="password" name="password" size="30" />

naturally, input text replaced (*)

so if user typed 123 box show ***

up here straight forward... but

now, wanna add small icon next password box when user hover in icon, can see has entered far.

so, hover in, box show 123 , when user hover out icon... box should show *** again

is there way javascript? also, using html , php

edit:

it doesn't need icon, checkbox or button... , if done in css appreciate know how

thanks in advance...

p.s. i've googled , search stackoverflow no luck

you need textbox via javascript when moving mouse on , change type text. , when moving out, want change password. no chance of doing in pure css.

html:

<input type="password" name="password" id="mypassword" size="30" /> <img src="theicon" onmouseover="mouseoverpass();" onmouseout="mouseoutpass();" /> 

js:

function mouseoverpass(obj) {   var obj = document.getelementbyid('mypassword');   obj.type = "text"; } function mouseoutpass(obj) {   var obj = document.getelementbyid('mypassword');   obj.type = "password"; }