| Author: fayaz 19 Aug 2008 | Member Level: Gold | Rating:  Points: 6 |
Hi use on mouse over function for this
here is a sample code
<html>
<head>
<title>Change from Textbox to Password Field</title>
<script type="text/javascript">
function hidepass(){
document.login.ptext.style.display='none';
document.login.pass.style.display='';
document.login.pass.focus();
}
function showpass(){
document.login.pass.style.display='none';
document.login.ptext.style.display='';
document.login.ptext.focus();
}
function setEnd (el) {
if (el.createTextRange) {
var FieldRange = el.createTextRange();
FieldRange.moveStart('character', el.value.length);
FieldRange.collapse();
FieldRange.select();
}
}
</script>
<style type="text/css">
.black {font:10pt arial; color:#000000;}
.grey {font:10pt arial; color:#989898;}
</style>
</head>
<body>
<form name="login">
<input type="text" name="user" value="User Name" class="grey" size="15" onFocus="if(this.value==this.defaultValue) {this.value=''; this.className='black';}" onBlur="if(this.value=='') {this.value = this.defaultValue; this.className='grey';}"><br><br>
<input type="text" name="ptext" value="Your password" size="15" class="grey" onClick="hidepass(this);"><input type="password" name="pass" value="" size="15" class="black" style="display:none" onFocus="setEnd(this);" onBlur="if (this.value=='') {showpass(this);}">
</form>
</body>
</html>
Regards,
Faiz
|
| Author: fayaz 19 Aug 2008 | Member Level: Gold | Rating: Points: 4 |
to change image try this
<html>
...
<script type="text/Javascript">
function changeBgImage (image , id) {
element = getDocumentByID(id);
element.style.background-image = url(image);
}
</script>
<body>
<div id="test" onMouseOver="changeBgImage('images/bg2.gif','test')">
</div>
</body>
</html>
Regards,
Faiz
|
| Author: Balthazor 20 Aug 2008 | Member Level: Diamond | Rating: Points: 6 |
The above answer is correct(Fayaz' - Great Response) However
It requires a little change.
In above code while tabbing(Using tab instead click on textbox) through controls the original password textbox don't get focus and the password will be written in text control.
so Here is the changed code.
<html>
<head>
<title>Change from Textbox to Password Field</title>
<script type="text/javascript">
function hidepass(){
document.login.ptext.style.display='none';
document.login.pass.style.display='';
document.login.pass.focus();
}
function showpass(){
document.login.pass.style.display='none';
document.login.ptext.style.display='';
document.login.user.focus();
}
function setEnd (el) {
if (el.createTextRange) {
var FieldRange = el.createTextRange();
FieldRange.moveStart('character', el.value.length);
FieldRange.collapse();
FieldRange.select();
}
}
</script>
<style type="text/css">
.black {font:10pt arial; color:#000000;}
.grey {font:10pt arial; color:#989898;}
</style>
</head>
<body>
<form name="login">
<input type="text" name="user" value="User Name" class="grey" size="15" onFocus="if(this.value==this.defaultValue) {this.value=''; this.className='black';}" onBlur="if(this.value=='') {this.value = this.defaultValue; this.className='grey';}">
<br><br>
<input type="text" name="ptext" value="Your password" size="15" class="grey" onClick="hidepass(this);" onFocus="hidepass(this);">
<input type="password" name="pass" value="" size="15" class="black" style="display:none" onFocus="setEnd(this);" onBlur="if (this.value=='') {showpass(this);}">
</form>
</body>
</html>
|