Solved

Change border color on mouseover, mouseout

Posted on 2003-11-18
8
920 Views
Last Modified: 2010-04-09
function rowOver(newRow) {
  newRow.style.background='white';
  newRow.border='1pt solid #737B92';
}

function rowOut(newRow) {
  newRow.style.color='black';
  newRow.border='1pt solid black';
  newRow.style.background='transparent';    
}

Is not doing anything.  newRow.style.border has same effect.  Thanks
0
Comment
Question by:dgelinas
  • 3
  • 2
  • 2
  • +1
8 Comments
 
LVL 17

Expert Comment

by:dorward
Comment Utility
Rows don't have borders, only cells and the table itself.

Something like:

<tr onmouseover="this.class='over';" onmouseout="this.class='';">
<td class="first">la la</td>
<td>la la</td>
<td>la la</td>
<td>la la</td>
<td class="last">la la</td>
<tr>

along with a style sheet along the lines off:

td.first {
 border-left: 2px solid black;
}

td.last {
 border-right: 2px solid black;
}

td {
  border-top: 2px solid black;
  border-bottom: 2px solid black;
}

.over td {
  border-color: white;
}
0
 
LVL 1

Expert Comment

by:ric7ho
Comment Utility
try:
function rowOver(newRow) {
  document.all[newRow].style.background='white';
  document.all[newRow].style.border='1pt solid #737B92';
}

function rowOut(newRow) {
  document.all[newRow].style.color='black';
  document.all[newRow].style.border='1pt solid black';
  document.all[newRow].style.background='transparent';    
}
0
 
LVL 17

Expert Comment

by:dorward
Comment Utility
Well...

(a) document.all is non-standard proprietary junk

and

(b) table rows still don't have a border
0
 
LVL 1

Expert Comment

by:Witchazel
Comment Utility
function rowOver(newRow) {
  newRow.style.background='white';
  newRow.border='1pt solid #737B92';
}

function rowOut(newRow) {
  newRow.style.color='black';
  newRow.border='1pt solid black';
  newRow.style.background='transparent';    
}

should be

function rowOver(newRow) {
  newRow.style.backgroundColor='white';    // notice the Color
  newRow.style.border='1pt solid #737B92';    // notice the style
}

function rowOut(newRow) {
  newRow.style.color='black';  
  newRow.style.border='1pt solid black';  // notice the style
  newRow.style.backgroundColor='transparent';      // notice the Color
}

another nice thing to do is

<script>
function hilite() {
  event.srcElement.style.color='black';
  event.srcElement..style.border='1pt solid black';
  event.srcElement.style.backgroundColor='transparent';    
}
function lowlite() {
  event.srcElement.style.color='white';
  event.srcElement..style.border='1pt solid blue';
  event.srcElement.style.backgroundColor='green';    
}
</script>
<div onmouseover=hilite onmouseout=lowlite>HIHI</div>

then you dont hafta care what element called it :)


-w
0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 11

Accepted Solution

by:
Zontar earned 340 total points
Comment Utility
More MSIE proprietary junk.

And it's incorrect as well.

And, since no-one seems to be listening to dorward, let me join in the chorus:

TABLE ROWS DO NOT HAVE BORDERS!

(Nor can you give them one using JS.)


Here's what you *can* do:

<!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></title>

<style type="text/css">
  .myTR {background-color:#EEE;}
  .myTR td {border-style:solid; border-color:#000; border-width:2px 0px 2px 0px; padding:15px 25px; margin:0px;}
  .myTR td.first {border-width:2px 0px 2px 2px;}
  .myTR td.last {border-width:2px 2px 2px 0px;}
</style>

<script type="text/javascript">
function over()
{
  this.style.backgroundColor = "#FF0";
  var TDs = this.getElementsByTagName("td");
  for(i = 0; i < TDs.length; i++)
    TDs[i].style.borderColor = "#F00";
}

function out()
{
  this.style.backgroundColor = "#EEE";
  var TDs = this.getElementsByTagName("td");
  for(i = 0; i < TDs.length; i++)
    TDs[i].style.borderColor = "#000";
}

function init()
{
  var table = document.getElementById("myTable");
  var TRs = table.getElementsByTagName("tr");
  for(var i = 0; i < TRs.length; i++)
  {
    TRs[i].onmouseover = over;
    TRs[i].onmouseout = out;
  }
}

window.onload = init;
</script>

</head>
<body>

<table id="myTable" cellspacing="0">
<tr class="myTR"><td class="first">text...</td><td>text...</td><td>text...</td><td class="last">text...</td></tr>
<tr class="myTR"><td class="first">text...</td><td>text...</td><td>text...</td><td class="last">text...</td></tr>
<tr class="myTR"><td class="first">text...</td><td>text...</td><td>text...</td><td class="last">text...</td></tr>
<tr class="myTR"><td class="first">text...</td><td>text...</td><td>text...</td><td class="last">text...</td></tr>
<tr class="myTR"><td class="first">text...</td><td>text...</td><td>text...</td><td class="last">text...</td></tr>
</table>

</body>
</html>


Works in MSIE 5+/NS6+/Mozilla/Opera 6+.
0
 
LVL 1

Expert Comment

by:Witchazel
Comment Utility
um  he never said it was a table :)
please read before you nag :P

0
 
LVL 17

Expert Comment

by:dorward
Comment Utility
Witchazel: Tables are the only bits of HTML that have rows. It was pretty obvious from the context.
0
 
LVL 11

Expert Comment

by:Zontar
Comment Utility
Yes, when somebody says "rows" (or in this case "newRow") in a HTML context without further qualification, I would automatically assume "table row". The fact that the original questioned that changing newRow.style.border had no effect was a further clue that this was the correct interpretation.

Also, your solution

<script>
function hilite() {
  event.srcElement.style.color='black';
  event.srcElement..style.border='1pt solid black';
  event.srcElement.style.backgroundColor='transparent';    
}
function lowlite() {
  event.srcElement.style.color='white';
  event.srcElement..style.border='1pt solid blue';
  event.srcElement.style.backgroundColor='green';    
}
</script>
<div onmouseover=hilite onmouseout=lowlite>HIHI</div>

would be better written as

<script>
function hilite(e)
{
  var el;

  if(!e)
  {
    e = window.event;
    el = e.srcElement;
  }
  else
    el = e.target;

  el.style.color='black';
  el.style.border='1pt solid black';
  el.style.backgroundColor='transparent';    
}
function lowlite(e)
{
  var el;

  if(!e)
  {
    e = window.event;
    el = e.srcElement;
  }
  else
    el = e.target;

  el.style.color='white';
  el.style.border='1pt solid blue';
  el.style.backgroundColor='green';    
}
</script>
<div onmouseover="hilite();" onmouseout="lowlite();">HIHI</div>

This would make it cross-browser.

However, setting the event handlers in script and then using "this" in the handler functions will do the same thing with less code for more elements.
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Do you want to insert HTML5 video into your site? This is the tutorial how to do so. What are the main advantages of HTML5 video? 1) Have good compression, good image quality, and low decode processor use. 2) It is royalty-free 3) It is easi…
Things That Drive Us Nuts Have you noticed the use of the reCaptcha feature at EE and other web sites?  It wants you to read and retype something that looks like this.Insanity!  It's not EE's fault - that's just the way reCaptcha works.  But it is …
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…

728 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now