Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations SkipVought on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Rollovers in Tables 1

Status
Not open for further replies.
Byn

Byn

Technical User
Sep 3, 2001
25
0
0
AU

Hi,

Could someone please tell me how I can highlight a complete table row on mouseover. The table was imported from Excel and consists of 5 columns and about 140 rows.
Can this event be applied to the whole table consecutively or does it have to be applied to each row individually?
An example of the code would be appreciated if possible.
Thanks in advance.

Byn.
 
Sort by date Sort by votes
As far I know each cell has to have it's own action, for example changing the fonts in each cell you would also, have to do that unless, ccs used.
If I hear anything different, I'll let you know.
kissy.
 
Upvote 0 Downvote
try this code, put this between the head tag:


<script language=&quot;JavaScript1.2&quot;>
function changeto(highlightcolor){
source=event.srcElement
if (source.tagName==&quot;TR&quot;||source.tagName==&quot;TABLE&quot;)
return
while(source.tagName!=&quot;TR&quot;)
source=source.parentElement
if (source.style.backgroundColor!=highlightcolor&&source.id!=&quot;ignore&quot;)
source.style.backgroundColor=highlightcolor
}
function changeback(originalcolor){
if (event.fromElement.contains(event.toElement)||source.contains(event.toElement)||source.id==&quot;ignore&quot;)
return
if (event.toElement!=source)
source.style.backgroundColor=originalcolor
}
</script>


Note:
If you want to exempt a specific row for a highlight put in the <tr id=&quot;ignore&quot;>


then on your each of your <tr> tag put this:



onMouseover=&quot;changeto('#eff7ff')&quot; onMouseout=&quot;changeback('#FFFFcc')&quot;






or if u want more clarifications try this link:



I hope this helps!


bignewbie
 
Upvote 0 Downvote
Finally found out how to do it with CSS!

CSS:
a.row:hover { background-color: #CCCCCC; width: 100%}


HTML:
set class to link in a table
<td><a href=&quot;aaa&quot; class=&quot;row&quot;>link1</a></td>

Whole example:
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=iso-8859-1&quot;>
<style type=&quot;text/css&quot;>
<!--
a.row:hover { background-color: #CCCCCC; width: 100%}
-->
</style>
</head>

<body bgcolor=&quot;#FFFFFF&quot; text=&quot;#000000&quot;>
<table width=&quot;200&quot; border=&quot;1&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot;>
<tr>
<td><a href=&quot;aaa&quot; class=&quot;row&quot;>link1</a></td>
</tr>
<tr>
<td><a href=&quot;bbb&quot;>link2</a></td>
</tr>
</table>
</body>
</html>


Good Luck!
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

mdvp
  • Locked
  • Question
Intermittent X-ref problem with figures in FM 12
Replies
0
Views
104
mdvp
mdvp
ccorry
  • Locked
  • Question
FrameMaker 2015 hyperlinks in book files don't work
Replies
0
Views
47
ccorry
ccorry
Mike Lewis
  • Locked
  • Question
Using Dreamweaver to maintain a site not created in Dreamweaver
Replies
2
Views
138
Mike Lewis
Mike Lewis
KDFischer
  • Locked
  • Question
Getting past Invalid cell in spreadsheet
Replies
0
Views
37
KDFischer
KDFischer
ElizaShteto
  • Locked
  • Question
Split One Page in two separate Pages in Framemaker 11
Replies
0
Views
48
ElizaShteto
ElizaShteto

Part and Inventory Search

Sponsor

Back
Top