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

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.


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


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


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

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.



But as Christian said, there is not much point in using JS to manipulate CSS when CSS can do it already.

Yeah, that's what I tried also.



Oops!



I didn't. But I forgot to mention it.

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.

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.

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.

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.

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)?

Do you want to make the links or the pages they lead to different?

The pages

Thought it looked odd.


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


or this


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.

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



If you want the H1 on this page to be the same size as the text but still 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/ .

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!

I rest my case...

Thanks for codes and the links! I shall work on my website again.