Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 4 of 4
  1. #1
    Junior Member
    Join Date
    Oct 2003
    Posts
    17
    Member #
    3467
    First off, sorry if this belongs in the JavaScript forum.

    Second, I was wondering if its possible to place onMouseOver/Out commands in JavaScript.

  2.  

  3. #2
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    The onmouseover and onmouseout are events, not commands per se. Therefore, they should be placed in the context of the elements they affect.

    For instance, if you have an image with onmouseover and onmouseout events, you could either do it like this:
    Code:
    <img src="abc.gif" onmouseover="mouseOver()" onmouseout="mouseOut()">
    or like this:
    Code:
    <html>
        <head>
            <script>
                function setEvents() {
                    img1.onMouseOver = mouseOver;
                    img1.onMouseOut = mouseOut;
                }
                mouseOver() {
                    return true;
                }
                mouseOut() {
                    return true;
                }
            </script>
        </head>
        <body onload="setEvents()">
            <img id="img1" src="xyz.gif">
        </body>
    </html>
    In the second option, you can make these events external, but then you lose the contextual nature of the events and will most likely run into inexplical bugs in the near future.

    As you can see, the first way is much simpler, and just makes more sense, because the events are placed within the context of the element, eliminating the need for body onload scripts.

  4. #3
    Junior Member
    Join Date
    Oct 2003
    Posts
    17
    Member #
    3467
    Thanks.

    In the site I'm working on, the background of the box that the links are in in the sidebar change colors on rollover.

    Here's the code:

    Code:
    <div class="sidetitle">
    ANOTHER LINK
    </div>
    <a href="#">
    <div class="sidelink" 
    onmouseover="this.style.background='url(linkroll.jpg)'"  
     onmouseout="this.style.background='url(linkback.jpg)'">
    another link</div></a>
    Since each one does this, I wanted to just place the JavaScript into a class instead of adding it everytime.

  5. #4
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    If you want, you can create a class for each state (on and off) and then just do onEVENT="this.className='NEW_CLASS';". In that way, you can make the style part of the script external. The event call itself should stay with the element, though, and is not CSS, so can't go into a CSS file anyway.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 05:46 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com