change style by image rollover

biggy · #1 (**permalink**) 01-12-2006, 04:44 PM

I can't seem to nail this down. What I need to do rollover an image in one td and change the style of the text in another td. What I have are text links on a page that when rolled over the style sheet says to underline them. That part is ok. What I need to do is when a user rolls over the image in the td next to the text link, the rollover style is applied to the text link and becomes underlined. This is what I have tried. Maybe it's a syntax issue. Thanks.
<html>
<head>
<title>Untitled Document</title>
<style type="text/css">

</style>
</head>
<body>
<table>
<tr>
<td><A href="theurl.html" onMouseOver="document.testLink.style='rolloverStyl e:hover'" onMouseOut="document.all.testLink.style='rolloverS tyle'"><IMG src="imagename.gif" border="1" name="testIcon"></A></td>
<td><div id="testLink"><A href="theurl.html" class="rolloverStyle">This is the text link.</A></div></td>
</tr>
</table>
</body>
</html>

biggy · #2 (**permalink**) 01-12-2006, 06:05 PM

This has what I needed to do the trick:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script type="text/javascript">
function setStyle(where,theclass){
document.getElementById(where).className=theclass;
}
</script>
<style type="text/css">

</style>
</head>
<body>
<table>
<tr>
<td><A href="theurl.html" onMouseOver="setStyle('testLink','rolloverStyleHov er')" onMouseOut="setStyle('testLink','rolloverStyle')"> <IMG src="imagename.gif" border="1" name="testIcon" alt=""></A></td>
<td><div id="testLink" class="rolloverStyle"><A href="theurl.html">This is the text link.</A></div></td>
</tr>
</table>
</body>
</html>

Thanks to _Aerospace_Eng_