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 1 of 1
  1. #1
    New Coder
    Join Date
    May 2010
    Posts
    79
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Help with Search Box

    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)
    Code:
    <!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:
    Code:
    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;
    }
    Last edited by authorandrew; 06-10-2010 at 11:44 AM. Reason: Removed a large table from the code that was a part of the original page but wasn't related to the problem


 

Posting Permissions

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