Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17


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
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
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…

688 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