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

x
?
Solved

Change border color on mouseover, mouseout

Posted on 2003-11-18
8
Medium Priority
?
929 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
[X]
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
  • 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
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.

 
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

This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
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…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

705 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