change bground color of button when mouseover

Question

1.80/5 (2 votes)

See more:

XML

<script type="text/javascript" language="javascript">

      window.onload = function() {
          document.getElementById("Button6").onmouseover = function()
          {
              this.style.backgroundColor = "#9933ff";
          }

          document.getElementById("Button6").onmouseout = function()
          {
              this.style.backgroundColor = "#9999ff";
          }
      }


  </script>

this code is work for one button only
how to make that code work for many buttons
B.R

Posted 17-Aug-13 19:42pm

sadmoh

Updated 17-Aug-13 19:59pm

v2

Add a Solution

Comments

Sergey Alexandrovich Kryukov 18-Aug-13 1:57am

http://whathaveyoutried.com?
—SA

ridoy 18-Aug-13 4:23am

the way you tried for 1 button,that's the way to do it for other buttons!

Sergey Alexandrovich Kryukov 20-Aug-13 12:29pm

How this code can work even for one button? It won't do anything on mouse over. Please see my answer.
If I misunderstood what you want, please comment on it.
—SA

3 solutions

Solution 5

Here is what you do: you first color your button in one color and then, immediately, color it in some different color. Naturally, you can see only the latest background color.

Instead, you need to handle some events. It's very convenient to do with jQuery library. Here is a complete code sample for your, please try:

XML

<html>
<head>
    <title></title>
    <script type="text/javascript" src="scripts/jquery-1.7.1.min.js"></script>
    <style type="text/css"><!--
        button.normal { backgroundColor:"#9933ff"; }
        botton.mouseOver { backgroundColor:"##9999ff"; }
    --></style>
</head>
<body>

    <button class="normal" id="myButton">Some text</button>

    <script type="text/javascript">

        $(document).ready(function() {
            buttonElement = $("#myButton");
            imageElement.hover( // accepts two functions
                function() { // mouse goes over:
                    $(this).toggleClass("normal", false); // remove one class first
                    $(this).toggleClass("mouseOver", true); // add another one
                },
                function() { // mouse goes out
                    $(this).toggleClass("mouseOver", false);
                    $(this).toggleClass("normal", true);
                }
            );
        }); </script>

</body>
</html>

If you need to learn jQuery (highly recommended), please see:
http://en.wikipedia.org/wiki/JQuery[^],
http://jquery.com/[^],
http://learn.jquery.com/[^],
http://learn.jquery.com/using-jquery-core/[^],
http://learn.jquery.com/about-jquery/how-jquery-works/[^] (start from here).

[EDIT]

If you need to, you can do it with different buttons and different colors. Actually, we had some disagreement about what you wanted, because the questions about mouse over and the question about different colors of different buttons look like different unrelated questions.

If you think that your issues are not yet addressed, please write a comment on it. I will gladly help you.

Thanks to Chris Maunder who reminded me about the last part of this question.

—SA

Posted 20-Aug-13 5:15am

Sergey Alexandrovich Kryukov

Updated 20-Aug-13 7:52am

v3

Solution 2

Try the CSS :hover selector

Posted 17-Aug-13 20:18pm

Shmuel Zang

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Chris Maunder · Accepted Answer · 2013-08-20T04:27:00

Solution 3

You can change the background colour of a button when the mouse goes over it using Javascript but a far easier way is to not use Javascript at all and instead use CSS.

In your CSS:

HTML

<style type="text/css">
.myHoverButton:hover { background-color: #9999ff; }
</style>

and in your HTML

HTML

<button id="button1" class="myHoverButton"> ... 
...
<button id="button6" class="myHoverButton"> ...

If you wish to stick to Javascript to do this then please refer to the other solutions.

Posted 20-Aug-13 4:27am

Chris Maunder772.7K

Updated 20-Aug-13 8:03am

v3

Comments

Sergey Alexandrovich Kryukov 20-Aug-13 11:23am

Chris,

It looks like you did not understand this question, but I also failed to understand it. Of course, it happened because OP's code sample is based on lack of understanding and could mislead you. But pay attention: OP asks how to change the background color of the button, not how to have two or more buttons of different colors.

Actually, I thought so, too, so I pointed out the OP's mistake and thought that OP mentioned the same "Button6" twice by mistake and by some weird reason did not try with others. It was my mistake.

And then you made another mistake: as notifications tells me, you reported my answer as "not an answer". That was a wrong step: incorrect answer (especially to a poor formulated question) is still an answer. It was as wrong as yours, no less no more. No problem: after all, you gave me a chance to review that wrong answer and find a correct one.

Okay, not I can see my past mistake; so I put really correct answer as Solution 5. Please see.

I hope you will remove this one by yourself.

Thank you.
—SA

Chris Maunder 20-Aug-13 12:10pm

Your response to the question was not an answer - in the sense it wasn't a solution that would enable the user to solve his problem.

With regards to my answer being incorrect I'm happy to have the original poster respond to my post and clarify. His question was title "change bground color of button when mouseover" and he posted sample code that attempted to solve this with Javascript, not jQuery. He also specifically asked how to make it work for many buttons, which my solution addressed. Nowhere do I mention "how to have two or more buttons of different colors"

It's up to the OP to comment and mark my solution correct or incorrect. I welcome your interpretation, but with respect I feel your intepretation of the question goes a little too far.

Sergey Alexandrovich Kryukov 20-Aug-13 12:26pm

I disagree, because it suggested what to do. You just did not notice it. And even is some answer does not suggest solution, it's can be a valid answer. Not in case of my answer: it was simply wrong.

Now, you fail to understand that your own answer is wrong. The title of the question asks about mouse over behavior, which you did not address it at all. As to "multiple buttons", it's merely and additional condition. After a correct basic answer, one should just add: you can do the same for some other buttons if you need to. After all, you can note that the OP's question is inconsistent and point it out, or ask for clarification. Instead, you gave a misleading answer as it ignores first part of the question.

And your comment "JavaScript not jQuery" is totally wrong. I'm far from the idea that you don't know that jQuery is JavaScript. Everything is correct. I don' understand why you don't want to accept the simple truth.

Finally, it's too hard to agree that "it's up to OP to mark your solution as correct and incorrect". As you don't want to admit your mistake, I'll vote 1 for your question, sorry. I hope you won't tell me that I cannot do that. :-)

Chis, may I ask you: what's wrong with you? Did you pay attention that I try to admit my mistakes when anyone correctly points them out? I actually already admitted my mistake on this page. Why won't you do the same? Maybe, today you just need to wake up? :-)

Thank you for understanding.
—SA

Chris Maunder 20-Aug-13 14:08pm

Let me address your comments point by point without geting personal and claiming there's something wrong with you.

1. The title of the post says "change bground color of button when mouseover". The poor grammar makes it extremely ambiguous. Does the OP mean "a javascript mouseover event" or do that mean "when the mouse hovers over the button"? As I said, I would like the OP to clarify. My interpretation was that he wanted to change the background colour when the mouse is over the button. My answer addressed this. I would LOVE the OP to clarify his question and if my understanding was wrong, I'll remove my answer.

2. "you gave a misleading answer as it ignores first part of the question.". I updated my answer with clarifictions

3. "And your comment "JavaScript not jQuery" is totally wrong". My full comment was "he posted sample code that attempted to solve this with Javascript, not jQuery." I see some plain Javascript in his code, but I do not see the OP using the jQuery library anywhere in his post.

4. "Finally, it's too hard to agree that "it's up to OP to mark your solution as correct and incorrect"." Why doesn't the OP have the right to decide the correctness of an answer?

5. "As you don't want to admit your mistake" Was my mistake in using CSS, or was my mistake in not taking his javasacript and adapting that to work with more than one button?

6. "I'll vote 1 for your question, sorry. I hope you won't tell me that I cannot do that. :-)"

This is your right. Enjoy.

Sergey Alexandrovich Kryukov 20-Aug-13 15:16pm

Nothing to enjoy about, but thank you for correcting things. I re-voted due to the correction.

1) Agree; but I already noted on the lack of consistency.
2) Great.
3) I know, but nothing tells me that the advise related on the use of jQuery is bad or inappropriate: a) it's still JavaScript; b) it makes the use of JavaScript way more easier, in more supportable manner, so it should be only helpful.
4) Please, don't shift the statement. I could not say OP does not have any right, I disagree that it is "up to OP"; see the difference? meaning: "not only OP".
5) Oh, I think you mistake was not using CSS, it was about ignoring the "mouse over" part of the question and your response to both my answers, incorrect one and the one I consider correct.
6) I know. :-)

Even though we are not completely agree, I hope we discussed all issues somehow. (Do we need to further reconcile them?)

Thank you for attention for this matter.

—SA

Sergey Alexandrovich Kryukov 20-Aug-13 13:51pm

Chris, as I understand, you restored my original answer, but edited it. I really appreciate it. I just tells me that you are really listening for arguments.

At the same time, unfortunately, your correction did not improve my answer (even though one member even added a positive response to it :-). As I already admitted, the whole answer was based on the fact that I badly misunderstood the OP's question. I added a note to Solution 5 instead, thank you for bringing the second part of the question to my attention again.

So, I just removed that my answer as it's was wrong, or incomplete at best, regardless of your modification. Sorry about it, but I hope you will understand.

Thank you.

—SA