Advertisement
Help Keep Boards Alive. Support us by going ad free today. See here: https://subscriptions.boards.ie/.
If we do not hit our goal we will be forced to close the site.

Current status: https://keepboardsalive.com/

Annual subs are best for most impact. If you are still undecided on going Ad Free - you can also donate using the Paypal Donate option. All contribution helps. Thank you.
https://www.boards.ie/group/1878-subscribers-forum

Private Group for paid up members of Boards.ie. Join the club.

javascript - Adding Events via the DOM

  • 28-06-2003 02:35PM
    #1
    p
    Registered Users, Registered Users 2 Posts: 2,119 ✭✭✭


    Hey all,

    I'm building a DOM based menu, so wondering how too attach an event to an object.

    e.g. i'd like to attache onMouseover to all the DIVs in a DIV with the id MENU.

    Can you do that, or does anyone have any alternatives or pointers.

    Thanks,

    - Kevin


Comments

  • #2
    Zaltais
    Closed Accounts Posts: 304 ✭✭Zaltais


    Hey p,

    It's actually not too hard to engineer, so I've bashed it together in the sample below.

    Shout, if it doesn't work properly or if you want me go though it, unfortunately I don't have time right now to go too far into details...

    [PHP]
    <html>
    <head>
    <script>
    <!--
    function start(){
    if( document.getElementById ) {
    var x = document.getElementById('menu');
    var y = x.getElementsByTagName("div");

    for (var i = 0; i < y.length; i++){
    y.setAttribute('onmouseover', 'change(this)');
    y.setAttribute('onmouseout', 'revert(this)');
    }

    } else {
    window.alert('Not supported');
    }

    }

    function change(a){
    a.style.backgroundColor = "Black";
    a.style.color = "White";
    }

    function revert(a){
    a.style.backgroundColor = "White";
    a.style.color = "Black";
    }
    -->
    </script>
    </head>
    <body onLoad="start();">
    <div id="menu">
    <div>DIV number 1</div>
    <div>DIV number 2</div>
    <div>DIV number 3</div>
    </div>
    </body>
    </html>
    [/PHP]


  • #3
    p
    Registered Users, Registered Users 2 Posts: 2,119 ✭✭✭p


    Hey, that looks perfect.

    I had to mae a change, to get it to work in IE5. Applying the function directly, like so, seems to work:

    [PHP]
    y.onmouseover = function () { change(this); };
    y.onmouseout = function () { revert(this); };
    [/PHP]

    Thanks.

    - Kevin


Advertisement