Cannot figure out onMouseOver

Question

I'm just messing around learning about JavaScript and I wanted to change the color of my background by resting my mouse over a link. Really I just want to learn about onMouseOver. I have:

<a href="http://www.w3schools.com" onMouseOver="document.bgcolor='lightgreen'">Visit W3Schools</a>

I tried applying this to radio buttons too that would change the bg color onclick, however If I wanted a preview of the color (by using onMouseOver) that part didn't work as it doesn't with the above.

Is the solution so obvious I'm overlooking it? Thanks for any help.

check out http://stackoverflow.com/questions/4783108/mouseover-on-radio-button-replacement — lifeIsGood, Mar 28 '12 at 20:38
Use firebug and see if your event is even firing, I would go the route of just calling a simple function that takes in the radio button such as: onmouseover="anExampleFunctionName(this)"... Then you should be able to get the value of that radio button and set it to the body's background color. Thing about onmouseover is it'll fire when you put the mouse over it but wont fire when it leaves... I would go the JQuery route in your case and just have a mouseenter and mouseleave events... — jveselka, Mar 28 '12 at 20:43
what's wrong with w3schools? i'm looking for decent tutorials. what are your ideas? — KiloJKilo, Mar 28 '12 at 21:00
Just type the first question(what's wrong with w3schools) into google and you'll get your answer... — jveselka, Mar 28 '12 at 21:05
@KiloJKilo my advise that will make your life easier: When trying to find something to do, just google `site:stackoverflow.com + (to find)` (I bet 99% of the time will be there), and when trying to find code reference google `(to find) + mdn` — ajax333221, Mar 28 '12 at 21:29

yunzen · Accepted Answer · 2012-03-28T21:24:14.970

2

No, it's not obvious. JavaScript is not so easy to handle. And you have to learn the types and names of the objects you can use in JavaScript.

The object document does not have a element bgcolor

What you are trying is to change the CSS-style of the element body of the document

document.body.style.backgroundColor = 'lightgreen';

One could do it by using the document object model (DOM) which is what you tried, but you have to respect the case. the correct form of the document's attribute is bgColor not bgcolor (Capital letter C).

// bad style
document.bgColor = 'lightgreen';

But it is not advisable. Why?

document is a part of the Document Object Model (DOM) and therefore mostly responsible for the data and the structure of the ... well ... document. The bgColor attribute of document maybe a relic of the dark HTML medieval, the pre CSS times.
The document should contain the data, and not the representation (aka style) of the data. That what the style attribute of every DOM element is for.
You can overrule the bgColor of the document simply by giving the body a CSS style for background-color. The document still has the bgColor attribute and the value, but what you see is the value of the CSS style

edited Mar 28 '12 at 21:24

answered Mar 28 '12 at 20:40

yunzen

32,854
11
73
106

thank you for your answer. This does work but it's surprising to me why document.bgcolor='lightgreen' works with onclick and not onmouseover. – KiloJKilo Mar 28 '12 at 20:45
@user1299209 In fact I was wrong, because it's not necessary for the bgColor to be changed by style alone. But you have to be careful with what you type. JavaScript is case sensitive. It's `bgColor` and not `bgcolor`. BUT i would not recommend it – yunzen Mar 28 '12 at 20:55
May I ask why you recommend document.body.style.backgroundColor instead of document.bgColor? – KiloJKilo Mar 28 '12 at 20:59
1. bgColor is a attribute of the document object model (DOM). This should contain only the data and structure, but not the looks 2. If you have a CSS declaration that sets the background-color of the body it overrules the document.bgColor – yunzen Mar 28 '12 at 21:09
That makes sense. Well, thank for your help and input. Greatly appreciated. – KiloJKilo Mar 28 '12 at 21:11
@yunzen - can you please update your answer to reflect your comments? People who read your post and not the comments might be led astray, and those who know better will probably downvote your answer. – dj18 Mar 28 '12 at 21:12
Welcome aboard. Now I advise you: On this community, if a answer is the correct one to your question, you can 'accept' it by clicking on the outlined tick to the left of the answer. The tick will become green and the kudos go to the answering person by increasing the reputation. – yunzen Mar 28 '12 at 21:14
@yunzen, I have selected. Your revise posting is exactly what is needed. Thanks again. And thanks for the tips for the site. – KiloJKilo Mar 28 '12 at 21:28

score 2 · Answer 2 · edited Mar 28 '12 at 21:07

2

onmouseover needs to be all lower-case onmouseover and it needs to equal a function (object.onmouseover=function(){//some code...} if in its own file and onmouseover="functionName()" if inline)

Here's an example: updated http://jsfiddle.net/TH2u3/1/

edited Mar 28 '12 at 21:07

Sparky

98,165
25
199
285

answered Mar 28 '12 at 20:42

zero

2,999
9
42
67

Tom · Answer 3 · 2012-03-28T21:06:23.553

0

the following works:

<!DOCTYPE html>
<html>
    <head>
        <script>
            var p = {
                onload: function() {
                    var a = document.getElementsByTagName("a")[0];
                    a.onmouseover = function() {
                        document.body.style.backgroundColor = "blue";
                    };
                    a.onmouseout = function() {
                        document.body.style.backgroundColor = "green";
                    };
                }
            };
    </script>
</head>
<body onload="p.onload()">
    <a href="http://www.w3schools.com">Visit W3Schools</a>
</body>

edited Mar 28 '12 at 21:06

answered Mar 28 '12 at 20:59

Tom

4,096
2
24
38

Thank you for your answer, however this seems overly complicated. Is their a certain advantage to using a function to achieve a simple background color change? – KiloJKilo Mar 28 '12 at 21:04
this shows you how it can be done; if you wanna simplify it, feel free. – Tom Mar 28 '12 at 21:05

Cannot figure out onMouseOver

3 Answers3