www.webdeveloper.com
Results 1 to 3 of 3

Thread: div onmouseout - reset to a changing class

  1. #1
    Join Date
    Nov 2009
    Location
    USA
    Posts
    2

    div onmouseout - reset to a changing class

    Ok I have a simple menu of div tags like this:
    <a href="home.html"><div id="home.html" class="leftmenu" onmouseover="this.className='menuover'" onmouseout="this.className='menuout'">Home</div></a>
    <a href="about.php"><div id="about.php" class="leftmenu" onmouseover="this.className='menuover'" onmouseout="this.className='menuout'">About</div></a>
    etc, etc..
    where the 'menuout' class is the same as "leftmenu" - this all works fine.

    BUT: now i have added a javascript function like this
    function checkActive() {
    var div = document.getElementsByTagName("div");
    if (window.location.href.substr(location.href.length - 1, 1) == '/') {
    var loc = window.location.href + 'home.html';
    }
    else {
    var loc = window.location.href;
    }
    for(var i=0; i < div.length; i++) {
    if (div[i].id == loc) {
    div[i].setAttribute("class", "active");
    div[i].setAttribute("className", "active");
    }
    }
    }
    that finds which div corresponds to the active anchor and changes that div class to "active" which makes the div background a little darker than either of the other classes.

    does someone know of an easy way to reset the class onmouseout to whatever it was before, either the default class or the active class? Besides refreshing the page? I can't just use the 'menuout' class anymore because i added the script for active links...

    thanks.

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Look at how Suckerfish dropdowns JavaScript change the class name.
    The class active is added not replacing the existing class.
    You get:
    Code:
    <a href="home.html" class="leftmenu">Home</a>
    //multiple classes
    <a href="home.html" class="leftmenu active">Home</a>
    Note that div inside an anchor is invalid, just give the anchor display:block;

  3. #3
    Join Date
    Nov 2009
    Location
    USA
    Posts
    2
    OK thanks. I knew someone was gonna mention the div inside the anchor. I just specified an anchor size and scrapped the div tags. now i can change the background of the area without using divs everything is working fine.

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