CSS

<style type="text/css">
.displaytext{opacity: 0.5; filter: alpha(opacity = 50);}
.normaltext{opacity: 1; filter: alpha(opacity = 100); }
.displayimg{ filter:alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5;background:url(hscripts.gif); }
.text{ background:#099;}
</style>

JavaScript

<script type="text/javascript">
function hiddenText(iid,value,classname)
{
document.getElementById(iid).value=value;
document.getElementById(iid).className=classname;
}

function displayText(iid,value,classname)
{
if(document.getElementById(iid).value =="")
{
document.getElementById(iid).value=value;
document.getElementById(iid).className=classname;
}
}

</script>

HTML

<center>
<input type="text" id="text1" value="Search On Techtunes" size="30" class='displaytext' onfocus="hiddenText(this.id,'','normaltext')" onblur="displayText(this.id,'Search On Techtunes','displaytext')">
</center>