Searchbox Background Image

This is a neat thing i saw in google's custom search box, and I've seen it other places, but for whatever reason I decide to see how it really works. So I download google's JS file and started hacking away. Below is what I came out with, slightly modified so it's easier to read through.

It's pretty basic stuff, but I like the effect it gives and it allows more freedom in designing a go button without having to put the word "search" in it. The onblur effect is nice, it replaces the background image if you move off the searchbox while it's empty. Anyways, enjoy !

cheers,
_tim

This searchbox is located at delta.ncsu.edu to see it in action.

---

HTML:

<form name="search" method="get" action="http://www.google.com/search" id="search">
    <label for="q">search delta:
    <input type="text" id="q" name="q" />
    <input type="hidden" value="www.yourwebsite.com" name="as_sitesearch" />
    <a href="javascript:document.search.submit()"><img src="images/go.jpg" alt="search this site"</a>
</form>
<script type="text/javascript" src="js/search.js"></script>

CSS:

#q{
    border:solid 1px #7F9DB9;
    width:112px;
    color:#000;
    height:auto;
    font-size:90%;
}

JavaScript:

(function() { 
	var f = document.getElementById('search'); if (f && f.q) { 
	var q = f.q; 
	var n = navigator; 
	var l = location; 
		if (n.platform == 'Win32') {} 
	var b = function() { 
		if (q.value == '') { q.style.background = '#FFF url(images/bg_search.gif) center no-repeat'; } }; 
	var f = function() { q.style.background = '#FFF'; }; q.onfocus = f; q.onblur = b; if (!/[&?]q=[^&]/.test(l.search)) { b(); } } })();

Posted by tcwrigh2 ( Nov 08 2006, 11:00:52 AM EST ) Permalink Comments [0]