table cells and mouse-over

Posted on 1999-07-09
Medium Priority
Last Modified: 2012-06-27
Developing Javascript for IE 4+:
I would like to create a navigation bar from a table (say, 1 row and 5 columns).  Each cell would represent a link to another web page.  Here's the question:
When the user mouses over one of the table cells (without clicking), I'd like that table cell to change foreground and background colors.  When the cursor exits that cell, the original colors should be restored.  Can you provide sample javascript for this?  Thanks in advance.
Question by:pbrooks
  • 3
  • 2
LVL 33

Accepted Solution

knightEknight earned 400 total points
ID: 1288991
<!-- Here is a cut-n-paste example from a paq: -->

<-- Create a file called main.css that looks like this: -->

body {font-family: "verdana, arial, helvetica"; font-size:8pt;}
A:link {text-decoration: none;}
A:visited {}
A:Hover {text-decoration: none; color:red;}
.toolbar {font-weight: medium; color: white; margin-left: 40px; font-size: 8pt; text-decoration: none}
.SideToolTitle {color: white; font-size: 12pt; font-weight: Bold; text-decoration: none; text-decoration: none;}
font.copyright {font-size: 8pt; color: white}
font.headline {font-weight: bold; font-size: 18pt; color: white; margin-left: 10}

td.Cell {bgcolor: white;}
TD {font-size: 8pt;}
.cover {background: navy; color: yellow}
.rover {background: black; color: white}
TD.BlackBG {color:white;}

TH {font-size:8pt;}

<!-- Then create main.htm that looks like this: -->

<TITLE>Bill Point Info</TITLE>
    <LINK REL=STYLESHEET HREF="main.css" TYPE="text/css">

<SCRIPT LANGUAGE="Javascript"> <!--
var rowHighlight = true // turn on row highlights
var colHighlight = true // turn off row highlights

function getElement(el) {
  var tagList = new Object
  for (var i = 1; i < arguments.length; i++)
    tagList[arguments[i]] = true
  while ((el!=null) && (tagList[el.tagName]==null))
    el = el.parentElement
  return el

function checkHighlight(which) {
  var el = getElement(event.srcElement,"TH","TD")
  if (el==null) return
  if ((el.tagName=="TH") && (colHighlight)) {
    var idx = el.cellIndex
    var table = getElement(el, "TABLE")
    var column = table.all.tags("COL")[idx]
    if (which)
  if ((el.tagName=="TD") && (rowHighlight)) {
    //var row = getElement(el, "TR")
    var row = getElement(el, "TD")
    var table = getElement(row, "TABLE")
    if (which)
      row.className = "rover"
      row.className = "" 
    cache = row

// -->

<BODY STYLE="margin:0; margin-left:0; margin-right:0; margin-top:0; margin-bottom:0;" BGCOLOR=White>


 ONSELECTSTART="return false"
 ONMOUSEOUT="checkHighlight(false)" > 

  <TD WIDTH="15%"></TD>
  <TD WIDTH="15%"></TD>
  <TD WIDTH="15%"></TD>
  <TD WIDTH="15%"></TD>
  <TD WIDTH="15%"></TD>
  <TD WIDTH="10%"></TD>

  <TD ALIGN="LEFT"><A href="JavaScript:{history.go(0)}">AO1000</a></TD>
  <TD ALIGN="LEFT">Name</TD>
  <TD ALIGN="LEFT">D707</TD>
  <TD ALIGN="LEFT">Name</TD>
  <TD ALIGN="RIGHT">434.64</TD>

  <TD ALIGN="LEFT"><A href="JavaScript:{history.go(0)}">A88000</a></TD>
  <TD ALIGN="LEFT">Name</TD>
  <TD ALIGN="LEFT">Name</TD>
  <TD ALIGN="RIGHT">70.49</TD>

  <TD ALIGN="LEFT"><A href="JavaScript:{history.go(0)}">A47080</a></TD>
  <TD ALIGN="LEFT">Name</TD>
  <TD ALIGN="LEFT">Name</TD>
  <TD ALIGN="RIGHT">107.3</TD>




Author Comment

ID: 1288992
Thanks!  Can you tell me where you got this code from?

LVL 33

Expert Comment

ID: 1288993
Sorry, I don't remember exactly, but I know it is a paq on this site somewhere, either in the JS forum or the HTML forum.  I got it about 6 months ago +/-2

Author Comment

ID: 1288994
Thanks, but how do I find the paqs and read them?

LVL 33

Expert Comment

ID: 1288995
paq - previously asked questions section at the bottom of each forum ...

Featured Post

Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

600 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question