...

View Full Version : Adding Watermark on Google search box.



Bengal313
12-19-2007, 07:04 PM
I have added a Google search box to my site and was wondering is there a way to have the Google logo as a watermark in the search box (textbox field). And when someone clicks inside the box, it disappears.

Philip M
12-19-2007, 08:14 PM
Try this:-

<style type="text/css">
<!--
TEXTAREA { background-image: url(GoogleLogo.gif) }
-->
</style>

<form name ="myform">
<TEXTAREA name = "txt1" id = "txt1" cols="20" rows="10" onclick = "changeBg()"></TEXTAREA>
</form>

<script type = "text/javascript">

function changeBg() {
document.getElementById('txt1').style.backgroundImage = 'none';
}
</script>

Bengal313
12-19-2007, 08:43 PM
Okay how about this:

I definded two classes in my css page.

.googlesearch
.googlesearch2

I gave the text field a class of googlesearch

Now, how do I create a script that will change class of the text field on the event OnFocus. Here is the form



<form method="get" action="http://www.google.com/custom">
<table cellspacing="0" cellpadding="0" border="0" style="background-color: #ffffff;">
<tr>
<td></td>
<td ><input type="text" name="q" size="25" maxlength="255" value=""/ class="googlesearch" />
<input type="submit" name="btnG" value="Google Search" />
<input type="hidden" name="safe" value="vss" />
<input type="hidden" name="cof" value="L:http://;AH:center;GL:0;BIMG:http://;" /> </td>
</tr>
</table>
</form>

_Aerospace_Eng_
12-19-2007, 08:57 PM
<input type="text" name="q" size="25" maxlength="255" value=""/ class="googlesearch" onfocus="if(this.value != '') this.className = 'googlesearch2'" onblur="if(this.value == this.defaultValue) this.className = 'googlesearch'" />

Bengal313
12-19-2007, 10:21 PM
I had the change this.

onfocus="if(this.value != '')

to

onfocus="if(this.value == '')

and it worked .

Thank you!

Bengal313
12-20-2007, 04:59 PM
Maybe I spoke too soon. I when I refresh the page and there is something in the text box the bg is still has the google image. Is there a way to say if there is a value in the text field Bg should be none or white?

Philip M
12-20-2007, 06:07 PM
<body onload = "checkBG()">

<style type="text/css">
<!--
TEXTAREA { background-image: url(GoogleLogo.gif) }
-->
</style>

<form name ="myform">
<TEXTAREA name = "txt1" id = "txt1" cols="20" rows="10" onclick = "changeBg()"></TEXTAREA>
</form>

<script type = "text/javascript">

function changeBg() {
document.getElementById('txt1').style.backgroundImage = 'none';
}

function checkBG() {
if (document.myform.txt1.value.length > 0) {
document.getElementById('txt1').style.backgroundImage = 'none';
}
}

</script>

</body>

Bengal313
12-20-2007, 09:37 PM
Thank you.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum