PDA

View Full Version : change style by image rollover

biggy
01-12-2006, 06:21 PM
I can't seem to nail this down. What I need to do is 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">
<!--
.rolloverStyle {font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-style: normal; font-weight: normal; line-height: 14px; color: #2a57a5; text-decoration: none;}
.rolloverStyle:hover {font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-style: normal; font-weight: normal; line-height: 14px; color: #2a57a5; text-decoration: underline;}
-->
</style>
</head>
<body>
<table>
<tr>
<td><A href="theurl.html" onMouseOver="document.testLink.style='rolloverStyle:hover'" onMouseOut="document.all.testLink.style='rolloverStyle'"><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>
_Aerospace_Eng_
01-12-2006, 06:29 PM
<!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">
<!--
.rolloverStyle a {font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-style: normal; font-weight: normal; line-height: 14px; color: #2a57a5; text-decoration: none;}
.rolloverStyleHover a {font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-style: normal; font-weight: normal; line-height: 14px; color: #2a57a5; text-decoration: underline;}
-->
</style>
</head>
<body>
<table>
<tr>
<td><A href="theurl.html" onMouseOver="setStyle('testLink','rolloverStyleHover')" 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>
biggy
01-12-2006, 06:35 PM
_Aerospace_Eng_: Thank you. Thank you. Thank you.
_Aerospace_Eng_
01-12-2006, 06:41 PM
You can also do this without using JS btw.
<!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>
<style type="text/css">
<!--
a.rolloverStyle {font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-style: normal; font-weight: normal; line-height: 14px; color: #2a57a5; text-decoration: none;}
a.rolloverStyle:hover {text-decoration: underline;}
-->
</style>
</head>
<body>
<table>
<tr>
<td><A href="theurl.html" class="rolloverStyle"><img src="imagename.gif" border="1" name="testIcon" alt="">&nbsp;This is the text link.</A></td>
</tr>
</table>
</body>
</html>
JS can always be disabled, so can CSS but its not as likely.