"hover" in stylesheet (DHTML)

phyllis posted this at 20:17 — 17th March 2000.

Joined: Mar 2000

Hi:

I'm wondering if anyone can answer a question about using the "hover" tag in a stylesheet. I am creating a webpage in which the navigation links are inside cells of a table. When I roll over the links, I want the background of the CELL (not the words) to change colors. I know that I can do that with the following string inside the anchor tag:

onMouseOver="parentElement.style.backgroundColor='#000080'"

(well, at least in Internet Explorer) but I want to know if I can change that with the "hover" tag inside the document's stylesheet. Here was the attempt that I wrote (which didn't work). Here is a style declaration for the class "nav" (everything except the parent-element declaration works fine).

A.nav:hover {color: #ffffff; text-decoration: none; font-family:
"Franklin Gothic Medium", Arial, Helvetica, sans-serif; font-weight:
normal; parent-element background-color: #000080}

I was pretty sure the last declaration wouldn't work, but I couldn't think of any other way to reference the background of the cell. Any ideas? I would really appreciate any suggestions that anyone has.

Thanks, Phyllis

Maverick posted this at 20:53 — 17th March 2000.

They have: 334 posts

Joined: Dec 1999

Try:

TD.nav A:hover {color: #ffffff; text-decoration: none; font-family:
"Franklin Gothic Medium", Arial, Helvetica, sans-serif; font-weight:
normal; background-color: #000080}

and on any cell you want to apply the hover effect:
<TD class="nav">

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

phyllis posted this at 21:50 — 17th March 2000.

They have: 59 posts

Joined: Mar 2000

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

Ken Elliott posted this at 22:41 — 17th March 2000.

They have: 358 posts

Joined: Jun 1999

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

Pimpin like a pimp with an electrofied pimpin machine!

phyllis posted this at 23:04 — 17th March 2000.

They have: 59 posts

Joined: Mar 2000

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

AndyB posted this at 00:07 — 18th March 2000.

They have: 344 posts

Joined: Aug 1999

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).]

NSS posted this at 02:01 — 18th March 2000.

They have: 488 posts

Joined: Feb 2000

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).]

Lloyd Hassell posted this at 02:15 — 18th March 2000.

They have: 231 posts

Joined: Feb 2000

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
    [email protected]    
 http://go.to/hass

:: Lloyd Hassell :: http://www14.brinkster.com/lloydh ::

Vincent Puglia posted this at 02:27 — 18th March 2000.

They have: 634 posts

Joined: Dec 1999

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).]

Where the world once stood
the blades of grass cut me still

phyllis posted this at 18:04 — 18th March 2000.

They have: 59 posts

Joined: Mar 2000

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

phyllis posted this at 20:46 — 18th March 2000.

They have: 59 posts

Joined: Mar 2000

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 posted this at 21:16 — 18th March 2000.

They have: 59 posts

Joined: Mar 2000

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