phyllis — Sat, 18 Mar 2000 21:16:00 +0000

Okay, well I do have one problem with the last example I just sent. Sigh. The table cells are a little "shaky" when you roll over them in IE (though they're fine in NN). This is fixed if I use <TD style="width:100%"> like in John Pollock's example. BUT, if I do that, then in IE the first cell in the table becomes very long and all following cells are tiny. I think it tries to set the table data width to be 100% of the table width (like it would if you wrote <td width="100%"> in just plain HTML. I guess I can live with the shakiness, but if anyone knows a way around it, please let me know! (Maybe it's only a problem in IE 4.72 & not later versions like 5.0.) I'll shut up for a while now. - Phyllis

phyllis — Sat, 18 Mar 2000 20:46:00 +0000

Well, I've answered my own question (about the centering) for anyone who's interested. You can center text in the cells while you're doing the rollover so long as you use stylesheet attributes to do the centering instead of HTML commands (oops, forgot about that option!). Here is a simple page I created that uses John Pollock's example but also centers the information. This works in both NN 4.5 & IE 4.72. My only comment on John's script is that I had to remove the phrase "width:100%" from the style definition of TD, otherwise I got strange cell widths in Explorer(?). Well, here goes. I'm MUCH happier to find a way to make these rollovers work in NN as well as IE than I would have been to find a shorter way to write them with "hover" (which I have not yet seen. Hopefully, I can eventually shorten this page:

--------------------------------------------
<html>
<head>
<title>Testing tables</title>

A.nav:visited {color: #ffffff; text-decoration: none; font-size: 9pt; font-family: Arial; text-align: center; vertical-align: middle}

A.nav:active {color: #ffffff; text-decoration: none; font-size: 9pt; font-family: Arial; text-align: center; vertical-align: middle}

td {background-color: #000080; text-align: center; vertical-align: middle}

-->
</style>

</head>

<body>

<a href="Hello" class="nav">Hello</a>

</LAYER>
</ILAYER>

</TD>

<TD width="50%" onMouseover="this.style.backgroundColor='#ff0000';"
onMouseout="this.style.backgroundColor='#000080'">
<ILAYER>
<LAYER ID="la2" bgColor="#000080" width="100%"
onMouseover="this.bgColor='#ff0000';"
onMouseout="this.bgColor='#000080'">
<a href="World" class="nav">World</a>
</LAYER>
</ILAYER>
</TD>

</tr>
</table>

</body>
</html>

--------------------------------------------

Thanks for all the responses! And thanks to the person who gave me the link to "Style Master." It was after downloading & playing with it that I remembered the "text-align: center" & "vertical-align: middle" statements.

Phyllis

phyllis — Sat, 18 Mar 2000 18:04:00 +0000

Hi & thanks for all the responses! I'm going through each of them. I visited Jon Pollock's tutorial which was VERY helpful. Though it didn't answer my "hover" question, it did show a way to change the cell background colors in both Netscape & Explorer (something I had given up on altogether). To anyone else who has been through his table cell tutorial: Do you know any way to make the data in the table cells center? Once I used the "style" & "ilayer" tags, the table data cells no longer recognized "align=center" or "valign=whatever", and if you use center....center tags, it moves the data vertically up inside the cell (though it DOES center it horizontally). If anyone has a workaround to this, I'd really love to hear it. Again, thanks for all the responses. - Phyllis

Vincent Puglia — Sat, 18 Mar 2000 02:27:00 +0000

Hi,

Something I've been playing with, but haven't written up for my site yet. The isOk var is defined elsewhere as an IE ver 4+ compatible browser.

Hope this helps.

code:

function swapColor(cell, switchOn)
{
  var source;
  if (!isOk)
  {
     alert("Sorry this script works only with IE browsers.");
     return 
  }
  source = document.all[cell];
 
  if (cell == "cellB1" && switchOn != true)
  {
     if (document.myForm.C1.checked)  source.bgColor = document.myForm.C1.value;  
      else                            source.bgColor = document.bgColor;
  }
  else
  {
    if (switchOn == true)
        source.bgColor = '#66ff66';
    else if (switchOn == false)  source.bgColor = document.bgColor;
    else                         source.bgColor = switchOn;
  }
}

  <td><form name="myForm">
            <p align="center"><input type="radio" name="R1"
            value="#66ff66" onclick="swapColor('cellA0',true)">Lime
            <input type="radio" name="R1" value="#ff6666"
            onclick="swapColor('cellB0',this.value)">Red <input
            type="radio" name="R1" value="aqua"
            onclick="swapColor('cellA0',this.value)">Aqua <input
            type="checkbox" name="C1" value="aqua"
            onclick="swapColor('cellB1',this.value)">Aqua </p>
        </form>
        <div align="center"><center><table border="1"
        width="100%" cols="3">
            <tr>
                <td id="cellA0">Names:</td>
                <td id="cellA1">Dick</td>
                <td id="cellA2">Jane</td>
            </tr>
            <tr>
                <td id="cellB0"
                onmouseover="return swapColor('cellB0',true)"
                onmouseout="return swapColor('cellB0',false)">English:</td>
                <td id="cellB1"
                onmouseover="swapColor('cellB1',true)"
                onmouseout="swapColor('cellB1',false)">85</td>
                <td id="cellB2">55</td>
            </tr>
            <tr>
                <td id="cellC0">Math</td>
                <td id="cellC1">95</td>
                <td id="cellC2">75</td>
            </tr>
        </table>
        </center></div></td>

[/code]

------------------
GrassBlade: cut&paste javascript

[This message has been edited by Vincent Puglia (edited 17 March 2000).]

Lloyd Hassell — Sat, 18 Mar 2000 02:15:00 +0000

I think this is what you are after. It still needs a bit of work.

Add the following to the cells you want to change:

class="nav"

Give each cell a unique id value:

id="cell1"

Add this b/w your <body></body> tags after your table:

code:

function cellOver() {
   if (event.srcElement.className == "nav") {
      document.all(event.srcElement.id).style.backgroundColor = "red";
      }
   }

if (document.all) {
   document.onmouseover = cellOver;
   }
[/code]

You can add your own mouseOut code.

The only problem with this script is that each cell requires a unique id value. eg. id="cell2". If this is left out the script will not work.

I want to change this so you don't have to add the id="" part to make it simpler. But right now I don't know enough to make this happen. I am reading up in this area now and I will post more info if I find a better solution.

------------------
Lloyd Hassell
    lloydhass@hotmail.com    
 http://go.to/hass

NSS — Sat, 18 Mar 2000 02:01:00 +0000

Hi,

Visit: http://www.westciv.com/style_master/academy/css_tutorial/index.html

It will help you to learn everything you want to know about CSS, CSS1, CSS2 .

Hope this helps

NSS

[This message has been edited by NSS (edited 17 March 2000).]

AndyB — Sat, 18 Mar 2000 00:07:00 +0000

here you go
http://www.pageresource.com/dhtml/jtut6.htm

and that's John Pollock's tutorial

[This message has been edited by AndyB (edited 17 March 2000).]

phyllis — Fri, 17 Mar 2000 23:04:00 +0000

Hi: Thanks for your response. I'm really happy to have found this bulletin board! Unfortunately, what I am trying to figure out is a way to change the background color of a table data (NOT the background-color of the text itself). Changing the background color of the text makes a really tight colored box around the words, but what I want is for the color of the whole table cell to change. I can do this on every link by using the line: onMouseOver="parentElement.style.backgroundColor='#ff0000'" because "parentElement" tells it to affect the TD, not the text. I was just hoping there was some way to write that into the stylesheet (with "hover") so I didn't have to insert the onMouseOver string on every link I use for navigation. An easier way sounds logical, but I can't figure one out! But thanks for your suggestions. - Phyllis

Ken Elliott — Fri, 17 Mar 2000 22:41:00 +0000

Well if I am understanding you correctly you pretty much only want it to work in IE. Which supports sytlesheets ":hover".

I hops this is what you where looking for.

code:

<style type="text/css">
<!--
a.nav {color: White; text-decoration: none; font-family: Tahoma Helvetica; font-weight: normal; background-color: #3333cc }
a.nav:hover {color: White; text-decoration: none; font-family: Tahoma Helvetica; font-weight: normal; background-color: #003300}
-->
</style>
[/code]

Well I hope this helps
VulKen
BigWaveMial

phyllis — Fri, 17 Mar 2000 21:50:00 +0000

Hi. I tried your suggestion and, though it works, it changes the background-color only around the text and not the whole cell. I guess it still thinks I only want to affect the contents of the cell rather than the cell itself. Yet the parentElement reference with onMouseOver (that I mentioned previously) works, so I don't know what to try. I don't know any way to write "parentElement.style.backgroundColor" other than as dot notation. I was hoping to avoid writing the onMouseover lines over & over. But thanks for your suggestion. I'll keep trying! - Phyllis