iLTC Home
Bookmark iLTC!

Categories

Perl
  • Perl Tutorials Beginners

    • Javascript
  • Javascript Tutorials
  • Javascript Tutorials Beginners

    • HTML
  • HTML Tutorials

    • Command Line
  • Command Line Tutorials

    • How Tos
  • Other Tips and Tricks



    		•

    for($i;$i < 1000;$i++) { }
    2210930

    		iLoveTheCode.com

    Javascript Change Background Colors

    NOTE: If you copy and paste this code, watch out for spaces and line returns put in by the browser, like after the getElementById.

    <body id=hey>

    <a onMouseover=document.getElementById('hey').style.backgroundColor='red'> Make it Red!</a> ----
    <a onMouseover=document.getElementById('hey').style.backgroundColor='#99FFCC'> Make it Sort of Green!!!</a>


    -In our HTML body tag, we name our id attribute hey because we like short names.
    -We create two links that use the Javascript onMouseover event handler.
    ---After the equals sign:
    -----document - this page
    -----getElementById - Javascript's built-in method that will get elements from our page.
    -----In the parenthesis - we state that we will be working on the hey element of our page.
    -----We then call the Javascript style object.
    -----We then call the backgroundColor property of the style object.
    -----We say make it red for the first sentence, and using a hexidecimal number with the pound symbol, make it "off green" for the second.


    NOTES: We could have put the id=hey in a table tag and our table would change background colors, like so:

    <table id=hey height=50><tr><td valign=top height=50>
    <a onMouseover=document.getElementById('hey').style.backgroundColor='red'> Make it Red!</a> ----
    <a onMouseover=document.getElementById('hey').style.backgroundColor='#99FFCC'> Make it Sort of Green!!!</a>
    </td></tr></table>



    Free Copy and Paste Javascript Code:

    <body id=hey>

    <a onMouseover=document.getElementById('hey').style.backgroundColor='red'> Make it Red!</a> ----
    <a onMouseover=document.getElementById('hey').style.backgroundColor='#99FFCC'> Make it Sort of Green!!!</a>



    Resources:
    Javascript Change Fonts
    Javascript Change Font Size
    HTML paragraph tag
    Javascript onMouseover
    Javascript onClick
    If, Else If, and Else in Javascript
    Create a Function in Javascript
    Call your Function in Javascript
    Passing an Argument or Variable to a Javascript
    Increment a Variable in Javascript






    Previous Article: Javascript Change Font Size
    Next Article: Javascript Ajax Call


    Search iLTC w/ Google




    Recent Articles

  • HTML Font Code
  • Javascript and CSS - Easy Pop Up Help Balloons
  • Use OnMouseOver in Javascript
  • Use onMouseOut in Javascript
  • Use innerHTML to Change Text on a Page
  • Renaming a File with Perl's RENAME Function
  • PRINT to Browser with document.write Command in Javascript
  • Passing an Argument or Variable to a Javascript
  • Opening an Alert Box in Javascript
  • Opening a REMOTE WINDOW in Javascript
  • OPEN and WRITE a Data File in Perl
  • OPEN and READ a Data File in Perl
  • Mimic Typing from a Textfield in a Textarea with Javascript
  • Javascript Reset Form








    • Perl Programming - Javascript Programming - HTML Code - Mac Unix Command Line - Maybe Some PHP - Free Scripts - ILoveTheCode
    All Content © 2006-2009 iLoveTheCode.com

    Contact Chris | About this Site


    2210141
    Counter by iLoveTheCode.com


    Last Modified: Saturday, 10-Jan-2009 05:40:24 EST



    Hosted as well :)
    Home-brewed logo - 1997