Solved

Change border color on mouseover, mouseout

Posted on 2003-11-18
8
923 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
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
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 340 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

Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
login jsp example 24 67
Decoding Special HTML Characters using Javascript? 2 37
Joomla 2.5 shopping cart 7 30
really easy css change help please 4 19
Showing your events from Google Calendar in Google Maps Why? I travel all week and I thought it would be ideal if staff in office knew where I was based on my calendar. (OK real reason: my son wanted to see where I would be working, and I thoug…
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

860 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