Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New to the CF scene
    Join Date
    Nov 2013
    Location
    Germany
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Question how to change bgColor with onMouseOver over different td's

    So thats the prob:
    first of all i am completly new to js.
    i have a html page in wich i have a colored table

    <table class="Table">
    <tr>
    <td id="tdRed" onMouseOver="changeColorTo(red);"></td>
    <td id="tdBlue" onMouseOver="changeColorTo(blue);"></td>
    <td id="tdYellow" onMouseOver="changeColorTo(yellow);"></td>
    </tr>
    </table>

    As written, each td has a different color.
    Now i want to have an external js data that makes the bgColor of the whole page change to the color in the specific td when i hover over it.
    e.g. i put my mouse on the blue td and the bgColor of the whole page turns blue.
    I tried to start in that js but i somehow dont get the hang on somewhere.
    i started it of like this:

    function changeColor(red, blue, yellow) {
    this.red = red;
    this.blue = blue;
    this.yellow = yellow;
    }
    function changeColorTo() {
    var newColor;

    Now i dont know how to continue everything i tried failed.
    Hope you can help me,
    i already say thanks to all tries

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    I'd do it like this (note untested since I haven't bothered with the CSS to set the colours of the table cells):

    Code:
    <table class="Table">
    <tr>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    </table>
    <script>
    (function() {
    var bgcolor, whichElement,addEvent;
    bgcolor = function() {
    document.hetElementsByTagName('body')[0].stype.backgroundColor = whichElement(e).style.backgroundColor;
    }
    whichElement = function(e) {
    var targ;
    targ = (window.event) ? window.event.srcElement : e.target;
    if (3===targ.nodeType) {
      targ = targ.parentNode;
    }
    return targ;
    };
    if (window.addEventListener)
    addEvent = function(ob, type, fn ) {
      ob.addEventListener(type, fn, false );
    };
    else if (document.attachEvent)
    addEvent = function(ob, type, fn ) {
      var eProp = type + fn;
      ob['e'+eProp] = fn;
      ob[eProp] = function(){ob['e'+eProp]( window.event );};
      ob.attachEvent( 'on'+type, ob[eProp]);
    };
     
    addEvent(document.getElementById('Table),
      'mouseover',
      bgcolor);
    })();
    </script>
    Can't see any reason why it wouldn't work though as the only new code I wrote is:
    Code:
    bgcolor = function() {
    document.hetElementsByTagName('body')[0].stype.backgroundColor = whichElement(e).style.backgroundColor;
    }
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • Users who have thanked felgall for this post:

    WhiteWiddow (11-22-2013)

  • #3
    New to the CF scene
    Join Date
    Nov 2013
    Location
    Germany
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Ty so far.!
    I'll try to translate that syntax into my script tomorrow. but that looks way more complicated as i expected

  • #4
    Regular Coder
    Join Date
    Aug 2010
    Posts
    974
    Thanks
    19
    Thanked 212 Times in 210 Posts
    Quote Originally Posted by WhiteWiddow View Post
    Ty so far.!
    I'll try to translate that syntax into my script tomorrow. but that looks way more complicated as i expected
    Very over simplified ...

    Code:
     
     <!DOCTYPE html>
    <html>
    <head>
    <script>
    function changeColorTo(color){
      document.body.style.backgroundColor=color;
    }
    </script> 
    </head>
    <body>
    <table>
    <tr>
    <td onmouseover="changeColorTo('red')   ;">red</td>
    <td onmouseover="changeColorTo('blue')  ;">blue</td>
    <td onmouseover="changeColorTo('yellow');">yellow</td>
    </tr>
    </table>
    </body>
    </html>

  • Users who have thanked DaveyErwin for this post:

    WhiteWiddow (11-22-2013)

  • #5
    Regular Coder
    Join Date
    May 2012
    Location
    France
    Posts
    224
    Thanks
    0
    Thanked 32 Times in 30 Posts
    What about this essay to choose colours ?

  • #6
    New to the CF scene
    Join Date
    Nov 2013
    Location
    Germany
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts
    I have done it the short form now like DaveyErvin considered but it doesnt work
    <!DOCTYPE html>
    <!-- Metainformationen zu dieser Seite -->
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="robots" content="noindex, nofollow">
    <meta name="author" content="Marcel Süfke">
    <meta name="publisher" content="Muddi">
    <title>HTML5-Template</title>
    <link type="text/css" href="CSSzuXhtml.css" rel="stylesheet">
    <script src="Javascript.js" type="text/javascript" charset="utf-8" defer>
    </script>

    </head>

    <!-- Inhalt der Seite -->
    <body>
    <!-- Textueller Inhalt -->
    <table class="FarbigeTabelle">
    <tr>
    <td id="RoteSpalte" onmouseover="changeColorTo(red);"></td>
    <td id="BlaueSpalte" onmouseover="changeColorTo(blue);"></td>
    <td id="GelbeSpalte" onmouseover="changeColorTo(yellow);"></td>
    </tr>
    </table>
    </body>
    </html>
    and the js is
    function changeColorTo(color) {
    document.body.style.backgroundColor=color;
    }

  • #7
    Regular Coder
    Join Date
    Aug 2010
    Posts
    974
    Thanks
    19
    Thanked 212 Times in 210 Posts
    <td id="RoteSpalte" onmouseover="changeColorTo(red);"></td>
    <td id="BlaueSpalte" onmouseover="changeColorTo(blue);"></td>
    <td id="GelbeSpalte" onmouseover="changeColorTo(yellow);"></td>


    should be ...

    <td id="RoteSpalte" onmouseover="changeColorTo('red');">red</td>
    <td id="BlaueSpalte" onmouseover="changeColorTo('blue');">blue</td>
    <td id="GelbeSpalte" onmouseover="changeColorTo('yellow');">yellow</td>

  • #8
    New to the CF scene
    Join Date
    Nov 2013
    Location
    Germany
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Ty very much.!
    final and working and valid solotion is this:
    <table id="FarbigeTabelle">
    <tr>
    <td id="RoteSpalte" onmouseover="changeColorTo('red')" onmouseout="changeColorTo('#6F604E')"></td>
    <td id="BlaueSpalte" onmouseover="changeColorTo('blue')" onmouseout="changeColorTo('#6F604E')"></td>
    <td id="GelbeSpalte" onmouseover="changeColorTo('yellow')" onmouseout="changeColorTo('#6F604E')"></td>
    </tr>
    </table>
    this way the TD is just colored without a text and everything is fine.
    JS:
    function changeColorTo(color) {
    document.getElementById('FarbigeTabelle').style.backgroundColor=color;
    document.body.style.backgroundColor=color;
    }

  • #9
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    The version I posted doesn't use the antiquated approach of jumbling the JavaScript and HTML together. It also only required adding one event listener for the entire table allowing you to add hundreds more rows to the table with different background colours without having to make any changes at all to the JavaScript - that's why it used a couple of library functions in addition to the single call that does the required job:

    document.getElementsByTagName('body')[0].style.backgroundColor = whichElement(e).style.backgroundColor;

    The addEvent function provides a cross browser way to add event listeners and whichElement identifies the exact element that triggered the event even though the event listener is attached to a different element and is relying on event bubbling to pass the event to the listener.

    All the variants posted since then are extremely limited and use a really OBTRUSIVE approach that only those who learnt how to write JavaScript for Netscape 4 and earlier would use.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • Users who have thanked felgall for this post:

    WhiteWiddow (11-26-2013)

  • #10
    Regular Coder
    Join Date
    May 2012
    Location
    France
    Posts
    224
    Thanks
    0
    Thanked 32 Times in 30 Posts
    @felgall : «It is in old cooking pots that the best soups are made »


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •