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 Chriss Miller 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
Joined
Sep 3, 2001
Messages
25
Location
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 Question
Intermittent X-ref problem with figures in FM 12
Replies
0
Views
680
mdvp
mdvp
ccorry
  • Locked
  • Question Question
FrameMaker 2015 hyperlinks in book files don't work
Replies
0
Views
268
ccorry
ccorry
Mike Lewis
  • Locked
  • Question Question
Using Dreamweaver to maintain a site not created in Dreamweaver
Replies
2
Views
950
Mike Lewis
Mike Lewis
KDFischer
  • Locked
  • Question Question
Getting past Invalid cell in spreadsheet
Replies
0
Views
286
KDFischer
KDFischer
ElizaShteto
  • Locked
  • Question Question
Split One Page in two separate Pages in Framemaker 11
Replies
0
Views
249
ElizaShteto
ElizaShteto

Part and Inventory Search

Sponsor

Back
Top