Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Regular Coder Bengal313's Avatar
    Join Date
    Jun 2002
    Location
    Metro Detroit
    Posts
    298
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Adding Watermark on Google search box.

    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.
    "Knowledge Speaks But Wisdom Listens"

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,982
    Thanks
    203
    Thanked 2,536 Times in 2,514 Posts
    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>
    Last edited by Philip M; 12-19-2007 at 07:35 PM.

  • #3
    Regular Coder Bengal313's Avatar
    Join Date
    Jun 2002
    Location
    Metro Detroit
    Posts
    298
    Thanks
    8
    Thanked 0 Times in 0 Posts
    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

    Code:
    <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>
    "Knowledge Speaks But Wisdom Listens"

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Code:
    <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'" />
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    Regular Coder Bengal313's Avatar
    Join Date
    Jun 2002
    Location
    Metro Detroit
    Posts
    298
    Thanks
    8
    Thanked 0 Times in 0 Posts
    I had the change this.

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

    to

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

    and it worked .

    Thank you!
    "Knowledge Speaks But Wisdom Listens"

  • #6
    Regular Coder Bengal313's Avatar
    Join Date
    Jun 2002
    Location
    Metro Detroit
    Posts
    298
    Thanks
    8
    Thanked 0 Times in 0 Posts
    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?
    "Knowledge Speaks But Wisdom Listens"

  • #7
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,982
    Thanks
    203
    Thanked 2,536 Times in 2,514 Posts
    <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>

  • #8
    Regular Coder Bengal313's Avatar
    Join Date
    Jun 2002
    Location
    Metro Detroit
    Posts
    298
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Thank you.
    "Knowledge Speaks But Wisdom Listens"


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •