text mouseover colors

yabber posted this at 17:37 — 1st December 2001.

Joined: Dec 2001

Hi,
I need to make my page so that on one side the text links are white & a mouseover changes the background color and on the other side of the page the text is black and a mouseover changes the text color to white & changes the background color.
I can get one or the other to work but not both at the same time.

Can any one help me with this please

Thank you

Mika

Busy posted this at 23:16 — 1st December 2001.

He has: 6,151 posts

Joined: May 2001

I know you can change the background of table cells by way of mouse over but this only works in IE
It may be easier and more browser friendly if you use images for the mouseovers.

taff posted this at 00:33 — 2nd December 2001.

They have: 956 posts

Joined: Jun 2001

The simple IE specific approach (possibly NN6 also?) would be to use CSS and classes. Have 2 sets of link class attributes.

Busy is right though. To be crossbrowser compatible, I'd go with an image mousover effect.

.....

mairving posted this at 02:05 — 2nd December 2001.

They have: 2,256 posts

Joined: Feb 2001

It works in IE and NS 6 and above. It doesn't error out in NS but it just doesn't have the rollover effect that it does in IE.

Here is the code that you would insert into your tag. You will have to fill in the blanks for the colors.
----------------------------------------------------------
onMouseOut="this.style.backgroundColor='#';" onMouseOver="this.style.backgroundColor='#';"
-----------------------------------------------------------

It is not a bad idea to add a bgcolor="#" attribute itself, if the table bgcolor is different. One like this would give you a darker gray background to a lighter gray background.
-----------------------------------------------------------
Link
------------------------------------------------------------
In addition, you may want to change the hover color in a stylesheet or in between some style tags by:
------------------------------------------------------------
A { text-decoration:none; font-weight:bold }

A:link { color:#000099}

A:visited { color:#000099}

A:active { color:#000099}

A:hover { text-decoration:underline; color:#990000 }

.nav {
text-decoration:none;
font-weight: 900;
font-size : 10px;
color:#000099;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
}
.nav:active {
text-decoration:none;
font-weight: 900;
font-size : 10px;
color:#000099;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
}
.nav:link {
text-decoration:none;
font-weight: 900;
color:#000099;
font-size: 10px;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
}
.nav:visited {
text-decoration:none;
font-weight: 900;
color:#000099;
font-size: 10px;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
}
.nav:hover {
text-decoration:none;
font-weight: 900;
color:#990000;
font-size : 10px;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
}
------------------------------------------------------------
This would create a class that you would call like such
-----------------------------------------------------------
Link
------------------------------------------------------------

Hope this helps.

Mark Irving
I have a mind like a steel trap; it is rusty and illegal in 47 states

yabber posted this at 14:01 — 3rd December 2001.

They have: 93 posts

Joined: Dec 2001

Thanks everyone,

I have it working now

Mika