www.webdeveloper.com
Results 1 to 4 of 4

Thread: [RESOLVED] Onmouuseover and onmouseout problem..

  1. #1
    Join Date
    Jan 2010
    Location
    Poland
    Posts
    14

    resolved [RESOLVED] Onmouuseover and onmouseout problem..

    I've got a problem because i don't really know what i did wrong.
    can anyone help? (I wanna change classes with 'onmouseover' and 'onmouseout')
    Here's my code:

    Code:
    <head>
    <script type="text/javascript">
    changeon(){
      document.getElementById('m_m').className="menu_image1";
    }
    changeoff(){
      document.getElementById('m_m').className="menu_image";
    }
    </script>
    </head>
    <a href="?id=1" class="menu_main"><div class="menu_image" onmouseover="changeon();" onmouseout="changeoff();" id="m_m">Main_1</div></a>
    <a href="?id=2" class="menu_main"><div class="menu_image" onmouseover="changeon();" onmouseout="changeoff();" id="m_m">Main_2</div></a>
    <a href="?id=3" class="menu_main"><div class="menu_image" onmouseover="changeon();" onmouseout="changeoff();" id="m_m">Main_3</div></a>

  2. #2
    Join Date
    Jan 2010
    Posts
    25
    There can be only one instance of an ID per web page. You shouldn't do it like that. You could potentially nest the menu items inside of a div id'd as menu, and access it non obtrusively like so:

    Code:
    divlist = document.getElementById('menu').getElementsByTagName;
    for (i= 0; i<divlist.length; i++) {
    	divlist[i].onmouseover = function() {
    		this.className= "menu_image1";
    	}
    	divlist[i].onmouseout = function() {
    		this.className = "menu_image";
    	}
    }
    Last edited by Powersurge360; 01-16-2010 at 08:53 PM. Reason: Forgot a semi-colon.

  3. #3
    Join Date
    Aug 2007
    Posts
    3,767
    Ids must be unique on the page, so you can only have one id of the same name per page. It is invalid (and unnessecary I'd say) to have a div inside an a. Also, your JavaScript is invalid. But you can do this:
    Code:
    <head>
    <script type="text/javascript">
    function changeon(a){
      a.className="menu_image1";
    }
    function changeoff(){
      a.className="menu_image";
    }
    </script>
    </head>
    <a href="?id=1" class="menu_main"><div class="menu_image" onmouseover="changeon(this);" onmouseout="changeoff(this);">Main_1</div></a>
    <a href="?id=2" class="menu_main"><div class="menu_image" onmouseover="changeon(this);" onmouseout="changeoff(this);">Main_2</div></a>
    <a href="?id=3" class="menu_main"><div class="menu_image" onmouseover="changeon(this);" onmouseout="changeoff(this);">Main_3</div></a>
    Even better, would be Event Delegation. Once you set it up, it makes your job much easier. Example (I removed your divs because you shouldn't need them, and it's a menu?).
    Code:
    <head>
    <script type="text/javascript">
    window.onload = function(){
    var e = document.getElementById("menu_main");
    e.onmouseover = change;
    e.onmouseout = change;
    };
    function change(e){
      e = e||window.event;
      e = e.target||e.srcElement;
      if (e.nodeName == "A") {
        e.className = e.className=="menu_image1"?"menu_image":"menu_image1";
      }
    }
    </script>
    </head>
    <div id="menu_main">
    <a href="?id=1" class="menu_image">Main_1</a>
    <a href="?id=2" class="menu_image">Main_2</a>
    <a href="?id=3" class="menu_image">Main_3</a>
    </div>
    Possible new CSS:
    Code:
    // Instead of .menu_main use
    #menu_main a {}
    That's untested, so try it out and read the link. If it doesn't work, ask.
    Oh, and by the way, you should only need one class. The default behaviour can be gotten by #menu_main a (that is, all a elements that are contained in something with an id of menu_main), and then the special behaviour can be .menu_image1 or something.
    Last edited by Declan1991; 01-16-2010 at 08:36 PM.

  4. #4
    Join Date
    Jan 2010
    Location
    Poland
    Posts
    14
    Ok, I used Declan1991's solution (the 1st one - the easiest to understand for me )
    You only missed "a" var in changeoff() function.

    Thanks guys

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles