Multi-Search Form With Thumbnails (Version 2)

This page shows how to make a multi-search form using thumbails or logos as per the example below. The user enters a search term and then clicks one of the logos to search that website. This is a variation on our original multi-search form.

To create a similar search form, use the code below and customize it to your needs.

Javascript & CSS

Place this code in the page head:

<script type="text/javascript">
function dosearch(se) {
 if (!se) { // have a default search engine ready:
  se = 'http://groceries.asda.com/asda-estore/search/searchcontainer.jsp?trailSize=1&searchString=';
 }
 if(document.getElementById) {
  st = escape(document.getElementById('searchterms').value);
 }
 var submitto = se + st;
 //window.location.href = submitto; // Opens in same window
 window.open(submitto, "resultsWindow", "height=500,width=740"); // Opens in a new window
 return false;
}
</script>
<style type="text/css">
.searchTn {
 cursor:pointer;
 margin-right:15px;
}
</style>

Form Code

This is the code for the form (customize as required):

<div style="background-color:#F2F2F2;padding: 15px;border:1px solid #666;max-width:360px;">
<form name="searchform" onSubmit="return dosearch();">
<input name="searchterms" id="searchterms" type="text" style="width:200px;">
<div style="margin-top:20px;">
<img src="img/asda.png" width="75" height="24" alt="" onclick="dosearch('http://groceries.asda.com/asda-estore/search/searchcontainer.jsp?trailSize=1&searchString=');" class="searchTn" />
<img src="img/tesco.png" width="87" height="24" alt="" onclick="dosearch('http://www.tesco.com/groceries/product/search/default.aspx?searchBox=');" class="searchTn" />
<img src="img/sainsburys.png" width="124" height="24" alt="" onclick="dosearch('http://www.sainsburys.co.uk/sol/global_search/global_result.jsp?bmForm=global_search&GLOBAL_DATA._search_term1=');" class="searchTn" />
</div>
</form>
</div>