CSS table cell m/over image to initiate search query - how?

Hi,

I have  code  to use mouse over images in a table - but I don't know how to initaite a search query from them.

I know that if I just wanted to get to another url I would use something like

    <td class="norm" onmouseover="this.className='hov';" onmouseout="this.className='norm';" onclick="top.location.href='http://www.apple.com';">

but to make the queries work I don't know how to code it.

If they ran off normal default submit buttons they would code like this:

<input name="submit" type="submit"  onClick="this.form.keywords.value = this.form.search.value; this.form.action = 'http://www.DOMAIN.com/dmoz/default.php ';"value="open directory">

<input name="submit" type="submit"   onClick="this.form.keywords.value = this.form.search.value; this.form.action = 'http://www.DOMAIN.com/ppc/default.php ';"value="ppc listings">

<input name="submit" type="submit"   onClick="this.form.keywords.value = this.form.search.value; this.form.action = 'http://www.DOMAIN.com/searchq.php';"value="reference">

 <input name="submit" type="submit"   onClick="this.form.keywords.value = this.form.search.value; this.form.action = ' http://www.DOMAIN.com/amazon/default.php';"  value="amazon">

 <input name="submit" type="submit"   onClick="this.form.keywords.value = this.form.search.value; this.form.action = 'http://www.DOMAIN.com/searchq.php';"value="health">
====

THIS is the code I am using - I have just put the first few queries in to show as examples of where they should be.


<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>

  <style type="text/css">
<!--
.norm1 {cursor:hand;
       cursor:pointer;
       background: url(http://www.playmac.com/header/web-search-only.png);
       color:#000000;
       }
.hov1 {cursor:hand;
      cursor:pointer;
      background: url(http://www.playmac.com/header/web-search-blue.png);
      color:#000000;}
//-->

.norm2 {cursor:hand;
       cursor:pointer;
       background: url(http://www.playmac.com/header/open-directory.gif);
       color:#000000;
       }
.hov2 {cursor:hand;
      cursor:pointer;
      background: url(http://www.appleness.com/bb3.gif);
      color:#000000;}
//-->

.norm3 {cursor:hand;
       cursor:pointer;
       background: url(http://www.appleness.com/overyello3.gif);
       color:#000000;
       }
.hov3 {cursor:hand;
      cursor:pointer;
      background: url(http://www.appleness.com/bb3.gif);
      color:#000000;}
//-->

.norm4 {cursor:hand;
       cursor:pointer;
       background: url(http://www.appleness.com/overyello3.gif);
       color:#000000;
       }
.hov4 {cursor:hand;
      cursor:pointer;
      background: url(http://www.appleness.com/bb3.gif);
      color:#000000;}
//-->

.norm5 {cursor:hand;
       cursor:pointer;
       background: url(http://www.appleness.com/overyello3.gif);
       color:#000000;
       }
.hov5 {cursor:hand;
      cursor:pointer;
      background: url(http://www.appleness.com/bb3.gif);
      color:#000000;}
//-->

.norm6 {cursor:hand;
       cursor:pointer;
       background: url(http://www.appleness.com/overyello3.gif);
       color:#000000;
       }
.hov6 {cursor:hand;
      cursor:pointer;
      background: url(http://www.appleness.com/bb3.gif);
      color:#000000;}
//-->

.norm7 {cursor:hand;
       cursor:pointer;
       background: url(http://www.appleness.com/overyello3.gif);
       color:#000000;
       }
.hov7 {cursor:hand;
      cursor:pointer;
      background: url(http://www.appleness.com/bb3.gif);
      color:#000000;}
//-->

.norm8 {cursor:hand;
       cursor:pointer;
       background: url(http://www.appleness.com/overyello3.gif);
       color:#000000;
       }
.hov8 {cursor:hand;
      cursor:pointer;
      background: url(http://www.appleness.com/bb3.gif);
      color:#000000;}
//-->

.norm9 {cursor:hand;
       cursor:pointer;
       background: url(http://www.appleness.com/overyello3.gif);
       color:#000000;
       }
.hov9 {cursor:hand;
      cursor:pointer;
      background: url(http://www.appleness.com/bb3.gif);
      color:#000000;}
//-->

.norm10 {cursor:hand;
       cursor:pointer;
       background: url(http://www.appleness.com/overyello3.gif);
       color:#000000;
       }
.hov10 {cursor:hand;
      cursor:pointer;
      background: url(http://www.appleness.com/bb3.gif);
      color:#000000;}
//-->

.norm11 {cursor:hand;
       cursor:pointer;
       background: url(http://www.appleness.com/overyello3.gif);
       color:#000000;
       }
.hov11 {cursor:hand;
      cursor:pointer;
      background: url(http://www.appleness.com/bb3.gif);
      color:#000000;}
//-->

.norm12 {cursor:hand;
       cursor:pointer;
       background: url(http://www.appleness.com/overyello3.gif);
       color:#000000;
       }
.hov12 {cursor:hand;
      cursor:pointer;
      background: url(http://www.appleness.com/bb3.gif);
      color:#000000;}
//-->

.norm13 {cursor:hand;
       cursor:pointer;
       background: url(http://www.appleness.com/overyello3.gif);
       color:#000000;
       }
.hov13 {cursor:hand;
      cursor:pointer;
      background: url(http://www.appleness.com/bb3.gif);
      color:#000000;}
//-->

.norm14 {cursor:hand;
       cursor:pointer;
       background: url(http://www.appleness.com/overyello3.gif);
       color:#000000;
       }
.hov14 {cursor:hand;
      cursor:pointer;
      background: url(http://www.appleness.com/bb3.gif);
      color:#000000;}
//-->

.norm15 {cursor:hand;
       cursor:pointer;
       background: url(http://www.appleness.com/overyello3.gif);
       color:#000000;
       }
.hov15 {cursor:hand;
      cursor:pointer;
      background: url(http://www.appleness.com/bb3.gif);
      color:#000000;}
//-->

.norm16 {cursor:hand;
       cursor:pointer;
       background: url(http://www.appleness.com/overyello3.gif);
       color:#000000;
       }
.hov16 {cursor:hand;
      cursor:pointer;
      background: url(http://www.appleness.com/bb3.gif);
      color:#000000;}
//-->

.norm17 {cursor:hand;
       cursor:pointer;
       background: url(http://www.appleness.com/overyello3.gif);
       color:#000000;
       }
.hov17 {cursor:hand;
      cursor:pointer;
      background: url(http://www.appleness.com/bb3.gif);
      color:#000000;}
//-->

.norm18 {cursor:hand;
       cursor:pointer;
       background: url(http://www.appleness.com/overyello3.gif);
       color:#000000;
       }
.hov18 {cursor:hand;
      cursor:pointer;
      background: url(http://www.appleness.com/bb3.gif);
      color:#000000;}
//-->

.norm19 {cursor:hand;
       cursor:pointer;
       background: url(http://www.appleness.com/overyello3.gif);
       color:#000000;
       }
.hov19 {cursor:hand;
      cursor:pointer;
      background: url(http://www.appleness.com/bb3.gif);
      color:#000000;}
//-->

.norm20 {cursor:hand;
       cursor:pointer;
       background: url(http://www.appleness.com/overyello3.gif);
       color:#000000;
       }
.hov20 {cursor:hand;
      cursor:pointer;
      background: url(http://www.appleness.com/bb3.gif);
      color:#000000;}
//-->

.norm21 {cursor:hand;
       cursor:pointer;
       background: url(http://www.appleness.com/overyello3.gif);
       color:#000000;
       }
.hov21 {cursor:hand;
      cursor:pointer;
      background: url(http://www.appleness.com/bb3.gif);
      color:#000000;}
//-->

.norm22 {cursor:hand;
       cursor:pointer;
       background: url(http://www.appleness.com/overyello3.gif);
       color:#000000;
       }
.hov22 {cursor:hand;
      cursor:pointer;
      background: url(http://www.appleness.com/bb3.gif);
      color:#000000;}
//-->

.norm23 {cursor:hand;
       cursor:pointer;
       background: url(http://www.appleness.com/overyello3.gif);
       color:#000000;
       }
.hov23 {cursor:hand;
      cursor:pointer;
      background: url(http://www.appleness.com/bb3.gif);
      color:#000000;}
//-->

.norm24 {cursor:hand;
       cursor:pointer;
       background: url(http://www.appleness.com/overyello3.gif);
       color:#000000;
       }
.hov24 {cursor:hand;
      cursor:pointer;
      background: url(http://www.appleness.com/bb3.gif);
      color:#000000;}
//-->

.norm25 {cursor:hand;
       cursor:pointer;
       background: url(http://www.appleness.com/overyello3.gif);
       color:#000000;
       }
.hov25 {cursor:hand;
      cursor:pointer;
      background: url(http://www.appleness.com/bb3.gif);
      color:#000000;}
//-->

.norm26 {cursor:hand;
       cursor:pointer;
       background: url(http://www.appleness.com/overyello3.gif);
       color:#000000;
       }
.hov26 {cursor:hand;
      cursor:pointer;
      background: url(http://www.appleness.com/bb3.gif);
      color:#000000;}
//-->

.norm27 {cursor:hand;
       cursor:pointer;
       background: url(http://www.appleness.com/overyello3.gif);
       color:#000000;
       }
.hov27 {cursor:hand;
      cursor:pointer;
      background: url(http://www.appleness.com/bb3.gif);
      color:#000000;}
//-->

.norm28 {cursor:hand;
       cursor:pointer;
       background: url(http://www.appleness.com/overyello3.gif);
       color:#000000;
       }
.hov28 {cursor:hand;
      cursor:pointer;
      background: url(http://www.appleness.com/bb3.gif);
      color:#000000;}
//-->


</style>
  <form method="get">
          <input type="hidden" name="keywords">
          <input type="hidden" name="c" value="1">
          <input type="hidden" name="index" value="0">
             
<table width="100%" height="79" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td background=" http://www.playmac.com/header/left.png"><img src=" http://www.playmac.com/header/left.png"></td>
    <td width="747">
      
      


<table width="747" height=79  border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td>
      
      
<table width="747"   border="0" cellspacing="0" cellpadding="0">
  <tr>
          <td width="337" height="32" background=" http://www.playmac.com/header/input.png">
             
              <input type="text" name="search"  value="" style='width:337px' maxlength="255">
             
             
              </td>
                <td width="72" height="32" background=" http://www.playmac.com/header/web-search-bg.png" >
            
            
            
<table width="72" height="32" border="0" cellpadding="0" cellspacing="0" background=" http://www.playmac.com/header/web-search-bg.png">
                    <tr>
    <td  background=" http://www.playmac.com/header/web-search-top.png"></td>
  </tr>
  <tr>
      <!-- WEB SEARCH BUTTON -->               <td class="norm" onmouseover="this.className='hov1';" onmouseout="this.className='norm1';" height="20" background=" http://www.playmac.com/header/web-search-only.png"  onClick="this.form.keywords.value = this.form.search.value; this.form.action = ' http://www.destination.com/searchq.php ';" value="Web Search"></td>
  </tr>
  <tr>
    <td background=" http://www.playmac.com/header/web-search-bottom.png"></td>
  </tr>
</table>
            
            

                        
                        
                        </td>
          <td width="338" height="32" background=" http://www.playmac.com/header/watermark.png"> </td>
  </tr>
 

 
</table>

<table width="747" border="0" cellpadding="0" cellspacing="0" background=" http://www.playmac.com/header/3rows.gif">

<!-- forts row of button -->

                <tr > 
 <td class="norm" onmouseover="this.className='hov2';" onmouseout="this.className='norm2';" height="14" onClick="this.form.keywords.value = this.form.search.value; this.form.action = 'http://www.DOMAIN.com/dmoz/default.php ';"value="open directory"> </td>
 <td class="norm" onmouseover="this.className='hov3';" onmouseout="this.className='norm3';" height="14"  onClick="this.form.keywords.value = this.form.search.value; this.form.action = 'http://www.DOMAIN.com/ppc/default.php ';"value="ppc listings"> </td>
 <td class="norm" onmouseover="this.className='hov4';" onmouseout="this.className='norm4';" height="14" onClick="this.form.keywords.value = this.form.search.value; this.form.action = 'http://www.DOMAIN.com/searchq.php';"value="reference"> </td>
 <td class="norm" onmouseover="this.className='hov5';" onmouseout="this.className='norm5';" height="14" onClick="this.form.keywords.value = this.form.search.value; this.form.action = ' http://www.DOMAIN.com/amazon/default.php';"  value="amazon"> </td>
 <td class="norm" onmouseover="this.className='hov6';" onmouseout="this.className='norm6';" height="14"> </td>
 <td class="norm" onmouseover="this.className='hov7';" onmouseout="this.className='norm7';" height="14"> </td>
 <td class="norm" onmouseover="this.className='hov8';" onmouseout="this.className='norm8';" height="14"> </td>
 <td class="norm" onmouseover="this.className='hov9';" onmouseout="this.className='norm9';" height="14"> </td>
 <td class="norm" onmouseover="this.className='hov10';" onmouseout="this.className='norm10';" height="14"> </td>
  </tr>
        <tr > 
 <td class="norm" onmouseover="this.className='hov11';" onmouseout="this.className='norm11';" height="14"> </td>
 <td class="norm" onmouseover="this.className='hov12';" onmouseout="this.className='norm12';" height="14"> </td>
 <td class="norm" onmouseover="this.className='hov13';" onmouseout="this.className='norm13';" height="14"> </td>
 <td class="norm" onmouseover="this.className='hov14';" onmouseout="this.className='norm14';" height="14"> </td>
 <td class="norm" onmouseover="this.className='hov15';" onmouseout="this.className='norm15';" height="14"> </td>
 <td class="norm" onmouseover="this.className='hov16';" onmouseout="this.className='norm16';" height="14"> </td>
 <td class="norm" onmouseover="this.className='hov17';" onmouseout="this.className='norm17';" height="14"> </td>
 <td class="norm" onmouseover="this.className='hov18';" onmouseout="this.className='norm18';" height="14"> </td>
 <td class="norm" onmouseover="this.className='hov19';" onmouseout="this.className='norm19';" height="14"> </td>
  </tr>
        <tr > 
 <td class="norm" onmouseover="this.className='hov20';" onmouseout="this.className='norm20';" height="19"> </td>
 <td class="norm" onmouseover="this.className='hov21';" onmouseout="this.className='norm21';" height="19"> </td>
 <td class="norm" onmouseover="this.className='hov22';" onmouseout="this.className='norm22';" height="19"> </td>
 <td class="norm" onmouseover="this.className='hov23';" onmouseout="this.className='norm23';" height="19"> </td>
 <td class="norm" onmouseover="this.className='hov24';" onmouseout="this.className='norm24';" height="19"> </td>
 <td class="norm" onmouseover="this.className='hov25';" onmouseout="this.className='norm25';" height="19"> </td>
 <td class="norm" onmouseover="this.className='hov26';" onmouseout="this.className='norm26';" height="19"> </td>
 <td class="norm" onmouseover="this.className='hov27';" onmouseout="this.className='norm27';" height="19"> </td>
 <td class="norm" onmouseover="this.className='hov28';" onmouseout="this.className='norm28';" height="19"> </td>
  </tr>
</table>

      </td>
  </tr>
</table>

      </td>
    <td background=" http://www.playmac.com/header/right.png"><img src=" http://www.playmac.com/header/right.png"></td>
  </tr>
</table>
</form>
</body>
</html>
LVL 4
macuser777Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

macuser777Author Commented:
you can see what i'm trying to do here -

http://playmac.com/header/css.php
vinlnxCommented:
try changing the onclick to document.formName.submit(). like: <td class="norm" onmouseover="this.className='hov';" onmouseout="this.className='norm';" onclick="document.formName.submit()">

Vinlnx
amit_gCommented:
<td class="norm" onmouseover="this.className='hov';" onmouseout="this.className='norm';" onclick="document.forms[0].keywords.value = document.forms[0].search.value; this.form.action = 'http://www.DOMAIN.com/dmoz/default.php';">

and so on.
JavaScript Best Practices

Save hours in development time and avoid common mistakes by learning the best practices to use for JavaScript.

macuser777Author Commented:
This is a solution that was written for me::

<script language="JavaScript">
/*
Written by Xia
submit: engine name
url: query string

example - doSearch('open directory', 'http://www.DOMAIN.com/dmoz/default.php');
*/
function doSearch(submit, url) {
      var searchForm = document.getElementById('Search');
      
      searchForm.action = url;
      searchForm.keywords.value = searchForm.search.value;
      searchForm.submit.value = submit;
      
      searchForm.mySubmit();
      return false;
}
</script>
WoodyRoundUpCommented:
And also, basically you are having duplicates of class.
this class: nov11, is nearly the same with other nov
and norm11 as well.
Is there any particular reason why? Or you don't realize it?
You could have just used one class for all same attributes of class.

<td class="norm" onmouseover="this.className='hov11';" onmouseout="this.className='norm11';" height="14"> </td>
macuser777Author Commented:
Hi WoodyRoundUP,

What i posted above was a quick paste

see here for how it should be

http://playmac.com/header/masterh.php

--If there's any way to reduce the file size please let me know - it's pretty unwieldy in practice.

macuser

WoodyRoundUpCommented:
Hi there. I think it's alright for me. I could not think of another way to do how you want it to be, except my first suggestion in your other post, I supposed.
The only draw back right now is that user will still be seeing the image is loading once you move your mouse over to one of the menu.
You could probably load your images first? Than the image won't be loading when you move your mouse over.
macuser777Author Commented:
yes - i'll need to add an efficient pre-loader. Also i'm guessing there's some way to move all the style code into my css file which might help a bit. But even on my 560 cable the header stutters into place whenever a search is made....hmmm

WoodyRoundUpCommented:
ok. If you want to do that, you can just put in all your css in a file,
and to replace <style></style>, you just call this:
<link rel="stylesheet" href="yourcssname.css" type="text/css">
macuser777Author Commented:
>>>macuser777: If you have not responded to the Experts concerning your question or given an updated status, your points will not be refunded.

err, Lunchy - what's that about - i've clearly given updated status and an effective answer. It's a bit further up,


This is a solution that was written for me::

<script language="JavaScript">
/*
Written by Xia
submit: engine name
url: query string

example - doSearch('open directory', 'http://www.DOMAIN.com/dmoz/default.php');
*/
function doSearch(submit, url) {
     var searchForm = document.getElementById('Search');
     
     searchForm.action = url;
     searchForm.keywords.value = searchForm.search.value;
     searchForm.submit.value = submit;
     
     searchForm.mySubmit();
     return false;
}
</script>
macuser777Author Commented:
>>WoodyRoundUp,

The table needed re-coding - it doesn't stutter now - I had over-nested it.
WoodyRoundUpCommented:
hi macuser777.

I tried to put your menu to the iframe so it is more organised.

I add in the height of the iframe as well, as all your height is not fixed.
Hopefully this helps a little.

<iframe id="describe" style="display:none; background-color:#E6E6FF;width:770px; border-width:0px;" onMouseover="clear_delayhide()" onMouseout="resetit(event)"></iframe>
</div>
<script language="JavaScript1.2">
/*
Tabs Menu (mouseover)- By Dynamic Drive
For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
This credit MUST stay intact for use
*/

var submenu=new Array()
var menuheight=new Array()
submenu[0]="menu1.php";
menuheight[0]="300";
submenu[2]="menu3.php";
menuheight[2]="300";
submenu[1]="menu2.php";
menuheight[1]="300";


And I change this one:
function showit(which)
{
clear_delayhide();
thecontent=(which==-1)? "" : submenu[which]
theheight=(which==-1)? "" : menuheight[which]
menuobj.style.display=(which==-1)?"none":"block";
if (document.getElementById||document.all)
      menuobj.src=thecontent;
else if (document.layers)
{
      menuobj.document.write(thecontent)
      menuobj.document.close()
}
menuobj.style.height=theheight;
}
macuser777Author Commented:
:) - thx WoodyRoundUp - that's a help
CetusMODCommented:
PAQ'd, 230 points refunded.
CetusMOD
Community Support Moderator

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
WoodyRoundUpCommented:
Hi there.
Why is that refunded?
So, my answer was not helping at all?
macuser777Author Commented:
Hi WoodyRoundUp,

Your comments were helpful on the hover effects - but this q was about initiating the searches using the css. I though you were just being helpful in general.

Sorry if there was some confusion.

Would you like me to post a q for you "Points for WoodyRoundUp" so you get some credit for cleaning up the hover effect?

macuser
WoodyRoundUpCommented:
No, that's fine.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Languages and Standards

From novice to tech pro — start learning today.