...

View Full Version : Help with Search Box



authorandrew
06-10-2010, 12:42 PM
Hey all,
I wouldn't say I'm new to HTML/CSS, etc, I have an average understanding of it but I'm definitely not experienced, especially with tying CSS into HTML. So anyways...my problem:

I am designing a custom start page for my firefox browser...and so far I've got a search bar at the very top that searches google, next to an image of a google logo. I want the following to happen when I click the google logo:

The image to change to a yahoo logo
The 'Click to Search Google' to change to 'Click to Search Yahoo'
The search bar searches yahoo instead.

Basically what I'm looking for is a way to click on the image to cycle through different search providers such as Amazon, Wikipedia, yahoo, and Google.

Here is my code: (and there are some invisible tables in there...but I'm getting them out of there slowly)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<title>Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="styles.css" />

<link href="altbg1.css" rel="alternate stylesheet" type="text/css" title="alt1" media="screen" />
<link href="altbg2.css" rel="alternate stylesheet" type="text/css" title="alt2" media="screen" />
<link href="altbg3.css" rel="alternate stylesheet" type="text/css" title="alt3" media="screen" />


<!--Favicon for Firefox-->
<link href='favicon.png' rel='shortcut icon'/>


<link href='favicon.png' rel='icon'/>
<!--Favicon for Firefox-->

<!--Search Javascript-->
<script type="text/javascript">
function dosearch() {
var sf=document.searchform;
var submitto = sf.sengines.options[sf.sengines.selectedIndex].value + escape(sf.searchterms.value);
window.location.href = submitto;
return false;
}
</script>
<!--BG Switcher-->
<script type="text/javascript">
function changeStyle(title) {
var lnks = document.getElementsByTagName('link');
for (var i = lnks.length - 1; i >= 0; i--) {
if (lnks[i].getAttribute('rel').indexOf('style')> -1 && lnks[i].getAttribute('title')) {
lnks[i].disabled = true;
if (lnks[i].getAttribute('title') == title) lnks[i].disabled = false;
}}}
</script>
<SCRIPT language="javascript">

<!-- hide javascript

function StartClock12() {
Time12 = new Date();
Cur12Hour = Time12.getHours();
Cur12Mins = Time12.getMinutes();
Cur12Secs = Time12.getSeconds();
The12Time = (Cur12Hour > 12) ? Cur12Hour - 12 : Cur12Hour;
The12Time += ((Cur12Mins < 10) ? ':0' : ':') + Cur12Mins;
The12Time += ((Cur12Secs < 10) ? ':0' : ':') + Cur12Secs;
The12Time += (Cur12Hour > 12) ? ' PM': ' AM';
document.CForm.Clock12.value = The12Time;
window.status = The12Time;
setTimeout('StartClock12()',1000);
}

function StartDate() {
TDay = new Array('Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday');
TMonth = new Array('January', 'February', 'March', 'April', 'May', 'June', 'July', 'August',

'September', 'October', 'November', 'December');
TDate = new Date();
CurYear = TDate.getYear();
CurMonth = TDate.getMonth();
CurDayOw = TDate.getDay();
CurDay= TDate.getDate();
TheDate = TDay[CurDayOw] + ', ';
TheDate += TMonth[CurMonth] + ' ';
TheDate += CurDay + ', ';
TheDate += ((CurYear%1900)+1900);
document.CForm.CDate.value = TheDate;
}

// done hiding -->

</SCRIPT>
</head>
<body onLoad="StartClock12();StartDate()";>

<div class="main">
<!--Welcome Image Begins-->
<img id="welcome" src="image.png" align="left"/>
<!--Welcome Image Ends-->

<!--Search Box Begins-->
<form method="get" action="http://www.google.com/search" style="display: inline;">
<input type="text" name="q" size="85"
maxlength="255" value=" Click to Search Google" onfocus="this.value=&quot;&quot;" id="searcher"

type="text"/>
</form>
<!--Search Box Ends-->
<br/>
<br/>
<br/>
<br/>
<span class="header"><b>Bookmarks:</b></span>
<!--THERE'S A LARGE TABLE HERE THAT CONTAINS ABOUT FIFTY BOOKMARKS SO I HAVE OMITTED IT FROM THE CODE SINCE IT DOES NOT PERTAIN TO THE SEARCH BOX-->
<br/>
<span class="header"><b>Change the Background:</b></span>
<table>
<tr>
<td><span onclick="changeStyle('main')"><img src="thumb1.png"

onmouseover="this.src='thumbroll1.png'"
onmouseout="this.src='thumb1.png'" style="padding:2px; border: 1px solid #000000; margin-

right:10px; margin-top:10px;" width="120" height="90"/></span></td>

<td><span onclick="changeStyle('alt1')"><img src="thumb2.png"

onmouseover="this.src='thumbroll2.png'"
onmouseout="this.src='thumb2.png'" style="padding:2px; border: 1px solid #000000; margin-

right:10px; margin-top:10px;" width="120" height="90"/></span></td>

<td><span onclick="changeStyle('alt2')"><img src="thumb3.png"

onmouseover="this.src='thumbroll3.png'"
onmouseout="this.src='thumb3.png'" style="padding:2px; border: 1px solid #000000; margin-

right:10px; margin-top:10px;" width="120" height="90"/></span></td>

<td><span onclick="changeStyle('alt3')"><img src="thumb4.png"

onmouseover="this.src='thumbroll4.png'"
onmouseout="this.src='thumb4.png'" style="padding:2px; border: 1px solid #000000; margin-

right:10px; margin-top:10px;" width="120" height="90"/></span></td>
</tr>
</table>
<!--End of Background Switcher-->
</div>
</body>
</html>

and here is my CSS styling from an external stylesheet:

body {
background:#70BCF2 url('background1.jpg') no-repeat;
}
/*background:#70BCF2 url('bg.png') repeat-x;*/

.main {
padding:1em;
background-color:rgba(255,255,255,0.5);
border: 1px solid #000;
}

/*Welcome Text and Globe Image*/
#welcome {
padding-right:.25em;
float:left;
}

/*Search Box*/
#searcher {
background:rgba(255,255,255,0.80);
border: 1px solid #000;
font-size:32px;
color:#000000;
height:44px;
text-decoration:strong;
float:right;
}

hr {
color: #0A277B;
background-color: #0A277B;
height: 1px;
}

/*Default Styling for Images*/
img {
cursor:default;
border:0;
}

tr {
margin-top:10px;
}

.header {
font-size:20px;
font-family: calibri, "segoe ui", arial;
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum