The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Changing font color with onmouseover
jazz vb
post Apr 14 2013, 01:15 PM
Post #1


Novice
**

Group: Members
Posts: 24
Joined: 14-April 13
Member No.: 19,010



Hello,

There are many sites who explain the principle of onmouseover, but still I cannot get it to work on my site. Can anybody tell me what I'm doing wrong? The idea is to change the word in the box to black when you move the mouse hand over it. Changing the background color works fine.

<table bgcolor="black" width="50%" border="1" rules="all" cellpadding="60" align="center">

<tr align="center" >
<td onclick="window.location='who.html'" style="cursor:pointer;" onMouseover="this.bgColor='#FFFF6F',this.fontcolor='black';" onMouseout="this.bgColor='black'"><width="25%"><font color="white"><font size="20"> Who? </font size></font></td>

In the css file I have:

td onclick a {
display: block;
width: 100%;
height: 100%; }

Jazz
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 14 2013, 05:27 PM
Post #2


.
********

Group: WDG Moderators
Posts: 8,043
Joined: 10-August 06
Member No.: 7



CODE
onMouseover="this.bgColor='#FFFF6F',this.fontcolor='black';"

Th two statements must be separated by a semicolon, not a comma. Also the style property for text color is called "color", not "fontcolor".

You could also use the CSS :hover selector instead of javascript, usually the former is more practical.

CODE
<td onclick="window.location='who.html'"

It's better to use real links instead of relying on javascript.

CODE
<font color="white"><font size="20"> Who? </font size></font>

The FONT element is quite outdated. It's more efficient to apply CSS to the parent TD element.

CODE
td onclick a {

There's no "onclick" selector in CSS. Also the "a" selector doesn't match any A element in the code sample.





User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 14 2013, 05:47 PM
Post #3


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,133
Joined: 9-August 06
Member No.: 6



QUOTE(Christian J @ Apr 15 2013, 12:27 AM) *

CODE
onMouseover="this.bgColor='#FFFF6F',this.fontcolor='black';"

Th two statements must be separated by a semicolon, not a comma. Also the style property for text color is called "color", not "fontcolor".


It still doesn't work. Maybe because there is no color attribute for TD? There is no bgcolor either, but it is supported by browsers anyway. if you do it by using the style object it works.

CODE
<td onmouseover="style.backgroundColor='#ffff6f'; style.color='#000000'">


But as Christian said, there is not much point in using JS to manipulate CSS when CSS can do it already.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 14 2013, 06:07 PM
Post #4


.
********

Group: WDG Moderators
Posts: 8,043
Joined: 10-August 06
Member No.: 7



QUOTE(pandy @ Apr 15 2013, 12:47 AM) *

My mistake. There is an old fgColor property, but it doesn't seem to work either.


Yeah, that's what I tried also.

QUOTE
You must also remove the <font color="white">, since it overrides the TD text color.


Oops!

QUOTE
BTW I also missed this part before, it's invalid:

CODE
<width="25%">

--either it should be part of the TD or removed.


I didn't. But I forgot to mention it. laugh.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 15 2013, 04:25 AM
Post #5


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,133
Joined: 9-August 06
Member No.: 6



I'm sorry! I wrote in your post. When I discovered I had done that it was too late to go back and restore your post. blush.gif sad.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
jazz vb
post Apr 15 2013, 08:55 AM
Post #6


Novice
**

Group: Members
Posts: 24
Joined: 14-April 13
Member No.: 19,010



Wow, thanks for all the input! I have followed your advise and some interesting things happened.

To start with changing the comma and font color, it didnt result in turning the letters black on a mouseover.

How can I turn my own html page into a real link?

The td onclick in the css I removed, again nothing happened, but that's something positive, I guess... : )

Changing this into style also made no difference.

However, when I removed <font color="white">, you couldnt see any words anymore. I pressume that is because I set the font color as well as the background color to black. But at least now, on mouseover, the text is black and the background color changes from black to FFFF6F.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
jazz vb
post Apr 15 2013, 09:03 AM
Post #7


Novice
**

Group: Members
Posts: 24
Joined: 14-April 13
Member No.: 19,010



Okay, I have put your advises, about using the css more, into practise. With good result! I kept the semicolon and font, left out the <font color="white">. And this is what I wrote in css:

td {
color:white;
border:0; }

:hover {
color:black; }

And that did the trick. Do you recommend to move more attributes from the html sheet to css? If so, which ones?

Again, thanks for sharing your knowledge.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 15 2013, 09:38 AM
Post #8


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,133
Joined: 9-August 06
Member No.: 6



Absolutely. Basically all but width and height for images. Having them in the HTML helps browsers so they can reserve space for them when the page loads. Otherwise you can see the page be redrawn as the images fill in.

As you've already learnt you can do away with presentational elements (tags) as well, as FONT.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
jazz vb
post Apr 15 2013, 11:15 AM
Post #9


Novice
**

Group: Members
Posts: 24
Joined: 14-April 13
Member No.: 19,010



I am trying to write the elements/attributes in css, but I got stuck. On my homepage are 4 links (nothing more), 4 of those boxes (cells?) I mentioned in my first post. These 4 pages I want to give different styles. My two questions are:

1. in a css, how do I refer to a particular page?
2. and how do I refer to the cells on the hompage, as the words in each cell also have a non-standard style (though they do not differ from each other)?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 15 2013, 12:57 PM
Post #10


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,133
Joined: 9-August 06
Member No.: 6



Do you want to make the links or the pages they lead to different?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
jazz vb
post Apr 15 2013, 01:12 PM
Post #11


Novice
**

Group: Members
Posts: 24
Joined: 14-April 13
Member No.: 19,010



The pages
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 15 2013, 01:15 PM
Post #12


.
********

Group: WDG Moderators
Posts: 8,043
Joined: 10-August 06
Member No.: 7



QUOTE(pandy @ Apr 15 2013, 11:25 AM) *

I'm sorry! I wrote in your post. When I discovered I had done that it was too late to go back and restore your post. blush.gif sad.gif

Thought it looked odd. blink.gif

QUOTE(jazz vb @ Apr 15 2013, 04:03 PM) *

:hover {
color:black; }

I forgot to mention that you should put an element selector before the :hover pseudo-class, like this:

CODE
td:hover {...}

or this

CODE
a:hover {...}

unless you want the style to change when you hover over the whole viewport. See also http://www.w3.org/TR/CSS21/selector.html#d...-pseudo-classes

It's also good practice to specify text color and background in the same rule, to avoid ending up with the same color for both text and background.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 15 2013, 07:38 PM
Post #13


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,133
Joined: 9-August 06
Member No.: 6



From a central style sheet? You can give each body tag an id. That way you can target a single page. Say you have a page with links. Then you could give BODY on that page the id "links".

To set the text and background colors for the hole page you'd go...

CODE
#links    { background: pink; color: green }


If you want the H1 on this page to be the same size as the text but still bold...

CODE
#links h1     { font-size: 100%; font-weight: bold }


You probably need to read up about contextual selectors here http://htmlhelp.com/reference/css/structure.html . Since you are new to this it's actually a good idea you start at the top http://htmlhelp.com/reference/css/ .
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 16 2013, 08:33 AM
Post #14


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,133
Joined: 9-August 06
Member No.: 6



Ha! I saw what you wrote Christian and yes, I did reply in the right thread. Who digs a pit will fall into it. Nyah nyah! laugh.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 16 2013, 12:45 PM
Post #15


.
********

Group: WDG Moderators
Posts: 8,043
Joined: 10-August 06
Member No.: 7



I rest my case... rolleyes.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
jazz vb
post Apr 16 2013, 03:13 PM
Post #16


Novice
**

Group: Members
Posts: 24
Joined: 14-April 13
Member No.: 19,010



Thanks for codes and the links! I shall work on my website again.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 16 2013, 04:00 PM
Post #17


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,133
Joined: 9-August 06
Member No.: 6



QUOTE(Christian J @ Apr 16 2013, 07:45 PM) *

I rest my case... rolleyes.gif


IPB Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 19th February 2019 - 03:54 AM