Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Change border color on mouseover, mouseout

Posted on 2003-11-18
8
Medium Priority
?
932 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
ID: 9773290
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
ID: 9774062
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
ID: 9774120
Well...

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

and

(b) table rows still don't have a border
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 1

Expert Comment

by:Witchazel
ID: 9774601
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
 
LVL 11

Accepted Solution

by:
Zontar earned 1360 total points
ID: 9777359
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
ID: 9781377
um  he never said it was a table :)
please read before you nag :P

0
 
LVL 17

Expert Comment

by:dorward
ID: 9781443
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
ID: 9783138
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

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

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

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

876 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