Forum Moderators: open
What I would like to have happen is when you run the mouse over one of the cells, the text decoration occurs for both cells. Currently they react independently of each other.
Here's the code for the style header and table
<style type="text/css">
A { text-decoration: underline; color: #000000}
A:hover { text-decoration: none; color: #0000CC}
</style>
<tr>
<td width="15%" align="center" height="20"><font face="Arial" size="2">
<b><a href="Volumes/01_Default.htm" target="_parent">01</a></b></font>
</td>
<td width="85%" height="20"><font face="Arial" size="2">
<b><a href="Volumes/01_Default.htm" target="_parent">Design Manual Use and Organization</a></b></font>
</td>
</tr>
Thanks in advance for any help.
Josh
Could you use a colspan, making these two cells into one? It would depend on your particular page - but if you can, then having everything in one double-wide cell might allow you to wrap both elements into one anchor tag. If so, then no javascript needed.
As for using javascript & css limiting use. What browsers would be affected. This is an internal company specs page. We do currently use css & I think there's some javascript. We mainly have IE5+, however some people do have ipaqs that may be accessing the page.
Do you have an example of this functionality that you could point me to, so that I can take a look at the code.
Thanks
josh
Using javascript, the idea is this:
1. give each slaved anchor a unique ID
2. this allows you to address that anchor's properties, so you can
3. change the class of the slaved anchor when there is a hover of the original
4. do this twice, so you have the effect working both ways
<html>
<head>
<title>Untitled</title>
<style typer="text/css">
a:link {text-decoration:underline;color:#000000;}
a:hover {text-decoration:none;color:#0000cc;}
a.hvr:link {text-decoration:none;color:#0000cc;}
</style>
</head><body>
<table cellpadding="10" border="1">
<tr>
<td><a href="#" id="slaved1" onMouseOver="document.getElementById('slaved2').className='hvr'" onMouseOut="document.getElementById('slaved2').className=';'">Link text one</a></td>
<td><a href="#" id="slaved2" onMouseOver="document.getElementById('slaved1').className='hvr'" onMouseOut="document.getElementById('slaved1').className=';'">Link text two</a></td>
</tr>
</table>
</body>
</html>
You might also consider setting { display:block } for each link. This would make the whole table cell clickable as a link (assuming the table cell has no other content).
Kaled.
I've never used the library myself, but I've always thought the demo was pretty nifty.
When I get back in the office I'll try one of those solutions.
Josh
Any ideas why it's doing that?
Thanks
Josh
Kaled.
