Calling an [a href] link through onclick?

[theone3]

I have a table with some <td>'s which I'd like to make act like links. You can see them for yourself here: http://www.alirobe.com/kingfisher2/products.htm (old version of site!)

They work at the moment using this code:

<td class="hovtbl"
onmouseover="this.className='hovtblover'"
onmouseout="this.className='hovtbl'"
onclick="document.location = 'fullcatalogue.htm'"
style="cursor:pointer">

Inside the table, there is also a linked piece of text.

What I'd like to do is to call the link from that piece of text and use that instead of document.location. The main reason for this is automated link management (i.e. moving pages) and simplicity of maintainence. On the products.htm page, this is not that important, but I am trying to use this link on other pages throughout the site.

Is this possible? If so, how and using what methods? Any help would be much appreciated! (Yes, I'm a newbie, but I've subscribed, so I'll be back ;))

[_Aerospace_Eng_]

I don't see the need for javascript for what you are trying to do.
<table border="0" cellpadding="8" cellspacing="3" align="center">
<tr>
<td rowspan="4" class="hovtbl">
<div style="overflow:hidden">
<img src="images/Product Images/Misc/prodhome.jpg"
alt="Kingfisher International Fiber Optic Product Range" width="250" height="198" />

</div>
</td>
<td class="hovtbl">
<a href="fullcatalogue.htm">Shortform<br />
<span>Full Product Range on one page.</span></a>
</td>
</tr>
<tr>

<td class="hovtbl">
<a href="InstrumentGuide.htm">Catalogue<br />
<span>Kingfisher's Handheld Product Range.</span></a>
</td>
</tr>
<tr>
<td class="hovtbl">
<a href="selector.htm">Product Selector<br />
<span>Applications based guide.</span></a>
</td>
</tr>
<tr>
<td class="hovtbl">
<a href="Products/InstrumentToolKits.htm">Popular Instrument Kits<br />
<span>Solutions for Common problems.</span></a>
</td>
</tr>

</table>
Then the CSS
.hovtbl a {
padding:10px; background:white; font-size:small;
display:block;
}
.hovtb1 a:hover {
background: repeat-x top url(../images/backgroundbottom.jpg);
padding:9px;font-size:small;
color:#444;
}
a span {
color:#777;
}
* html .hovtb1 a {
height:1px;
}
.box {border:1px solid #CCCCCC;
background: repeat-x top url(../images/backgroundbottom.jpg);
padding:9px;font-size:small;}
.box {font-size:small;text-transform:uppercase;letter-spacing:.5em;}

[theone3]

Thanks very much. :thumbsup:

I had to make a few mods to your code, there were a few misspellings, missing bits, extra unwanted bits, etc. For future reference, here's the final CSS. The HTML is essentially unchanged.


.hovtbl a {
padding:10px; background:white; font-size:small;
display:block;
}
.hovtbl a:hover {
background: repeat-x top url(images/backgroundbottom.jpg);
padding:9px;font-size:small;
color:red; border: 1px solid #CCCCCC
}
a span {
color:#777; font-weight:400;
}
* html .hovtbl a {
height:1px;
}

It never occured to me to even attempt this without JS. I guess I haven't got my CSS as down as I thought :P