Change background color of webpage by mouse over the color

Discussion in 'JavaScript and AJAX' started by Nishant24, Oct 5, 2013.

  1. Nishant24

    Nishant24 New Member

    Joined:
    Apr 17, 2013
    Messages:
    6
    Likes Received:
    0
    Trophy Points:
    0
    Occupation:
    Student
    Hey, guys.,, I am in 12th class and I was a given a question in my computer practical exam to write a script in javascript that changes background color of the webpage when mouse cursor is over the link of the particular color.
    For eg. We created a link naming red and when we put our mouse cursor over that link, the background color changes to red instead of white.
    And further I was asked that if we move the cursor from that link the background color should again change to white from red.
    Help me friends.... the first scritp I wrote but after moving the cursor from that link it still remains red only, I mean the background of the webpage.

    Help guys..
    Thanks
     
  2. shabbir

    shabbir Administrator Staff Member

    Joined:
    Jul 12, 2004
    Messages:
    15,375
    Likes Received:
    388
    Trophy Points:
    83
    Show us some efforts on what you have tried.
     
  3. Ami Desai

    Ami Desai Member

    Joined:
    Jan 5, 2017
    Messages:
    42
    Likes Received:
    17
    Trophy Points:
    8
    Location:
    Ahmedabad
    Home Page:
    http://www.ifourtechnolab.com/
    Hi,

    You can check this

    HTML:
    <script language="javascript">
    function change_background_color(c){
    document.getElementById('div2change').style.backgroundColor= '#'+c;
    }
    </script>
    
    <div id="div2change" style="background-color: #cde; padding: 10px ; text-align: center;">
    
    You can change background color of this div just bringing your mouse over colors.
    
    
    <a style="background-color: #0f3;" class="cc" onMouseOver="change_background_color('00ff33'); ">00ff33</a>
    <a style="background-color: #6cf;" class="cc" onMouseOver="change_background_color('66ccff'); ">66ccff</a>
    <a style="background-color: #ff9;" class="cc" onMouseOver="change_background_color('ffff99'); ">ffff99</a>
    <a style="background-color: #0fc;" class="cc" onMouseOver="change_background_color('00ffcc'); ">00ffcc</a>
    
    </div>
    Thanks
     
    shabbir likes this.

Share This Page

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice