asked on

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">


.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>
 <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">



<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>

macuser777

ASKER

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

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

vinlnx

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_g

<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.

macuser777

ASKER

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>

WoodyRoundUp

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>

macuser777

ASKER

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

WoodyRoundUp

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.

macuser777

ASKER

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

WoodyRoundUp

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">

macuser777

ASKER

>>>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>

macuser777

ASKER

>>WoodyRoundUp,

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

WoodyRoundUp

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;
}

macuser777

ASKER

:) - thx WoodyRoundUp - that's a help

ASKER CERTIFIED SOLUTION

CetusMOD

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

WoodyRoundUp

Hi there.
Why is that refunded?
So, my answer was not helping at all?

macuser777

ASKER

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

WoodyRoundUp

No, that's fine.