SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2006
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    change multiple classes onmouseover

    Hi All,

    ok ive checked everywhere for this, and im sure ive done it in the past.

    To be able to hover over a single link and use onmouseover to change the class of a table ...or change the class of more than one div/table on the page.

    i dont want to change the class of the item im rolling over, and thats all i can seem to find when searching the net! thousands of ways to do that but not what i need lol

    anyway, if anyone can tell me how to do it, it would be most appreciated.
    Im sure you didnt need to create a seperate javascript function to do this!

  2. #2
    SitePoint Zealot logitron's Avatar
    Join Date
    Feb 2006
    Posts
    144
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    HTML Code:
    <div class="onmouseout" onMouseOver="document.getElementById('onmouseout').setAttribute('class','onmouseover')" onMouseOut="document.getElementById('onmouseout').setAttribute('class','onmouseout')"></div>
    When the mouse is over this 'div' tag, it will set the class of a tag that has an id of 'onmouseout' to a different class. When the mouse moves outside the div, it will set the class of a tag that has an id of 'onmouseout' back to what is was. Does that make sense?
    Patrick Smith
    PHP Programmer

  3. #3
    &#083;itePoint Aficionado JVLB's Avatar
    Join Date
    Jan 2002
    Location
    N 44 56.537' W 123 3.683'
    Posts
    1,127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A simple example (though it appears Mr. Smith has beaten me to it):

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Untitled</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    .one{height:200px;width:300px;background:#ddf;}
    .two{height:200px;width:300px;background:#dfd;}
    </style>
    <script type="text/javascript">
    function clChg(){
      var targ=document.getElementById('target');
      targ.className="two";
    }
    </script>
    </head>
    <body>
    <div style="height:200px;width:300px;background:#fdd;" onmouseover="clChg()"></div>
    <div id="target" class="one"></div>
    </body>
    </html>

  4. #4
    SitePoint Enthusiast
    Join Date
    Oct 2006
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    great thanks alot, yea hehe i got it working from Mr Smiths reply
    But thanks for the example, more the merrier!
    an hour of searching google and sifting through hundreds of different javascript snippets, and none of them showed the nice simple document.getElementById and setAttribute functions.

    I was just wondering...can you store these onmouseover functions in an external file and link to them as you would a javascript function?
    Because of the length of them and having to use them on multiple lines, it would be cool if you could just store them in a .js .txt file or something, link to that file in the header, and then just type the call command for that line?

    hmmm ...in fact can do it with php!

    cool im gonna go try!

    thanks again!

  5. #5
    SitePoint Enthusiast
    Join Date
    Oct 2006
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ah ...also just seen as per the example you posted JVLB ...seperate function to go in an external file (or just keep at the top) and a nice short onmouseover command!

  6. #6
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by arcana_x View Post
    Hi All,

    To be able to hover over a single link and use onmouseover to change the class of a table ...or change the class of more than one div/table on the page.

    i dont want to change the class of the item im rolling over, and thats all i can seem to find when searching the net! thousands of ways to do that but not what i need lol

    Im sure you didnt need to create a seperate javascript function to do this!
    It's certainly preferable, especially if you want to ensure that the required functionality is available. It wasn't clear exactly what you wanted, but here are three separate functions to change classnames in different ways:
    Code:
    function setOneClassToMany() /* First param=new classname, subsequent params = IDs of all elems to change */
    {
     var ref;
     document.eFunc=document.getElementById || document.all;
    
     if( document.eFunc )
      for( var i=1; i<arguments.length; i++ )
       if( ref=document.eFunc( arguments[i] ) )
        ref.className=arguments[0];
    }
    
    function setMultipleClasses() /* Specify multiple id/class pairs */
    {
     var ref;  
     document.eFunc=document.getElementById || document.all;
    
     if( document.eFunc )
      for( var i=0; i<arguments.length; i+=2 )
       if( ref=document.eFunc( arguments[i] ) )
        ref.className = arguments[i+1];
    }
    
    function changeClassName(cName, newName) /* Change all elems with cName to newName */
    {
     var elems = document.all||document.getElementsByTagName('*');
     
     if( elems )
      for( var i=0; i<elems.length; i++ )
       if( elems[i].className == cName )
        elems[i].className = newName;
    }

  7. #7
    SitePoint Enthusiast
    Join Date
    Oct 2006
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for that Logic Ali, yea to be honest, i wasnt too sure what i wanted either, as i kind of knew there would be different ways to go about changing classes one way or another.

    But these methods seem great. I needed a class changing feature just for a little thing im doing for myself. Ive always been firm in my ways that i MUST not use javascript in my commercial websites as far as the actual layout, design and navigation are concerned. I would only use it possibly for a small feature that wouldnt be crucial to the sites functionality.
    Ive thought this way for years!

    Out of interest, do you think im right to think like this. or are we now at a stage where javascript is pretty much enabled as standard and its worth using whenever needed without any need to worry. The year 2007 and everything!

  8. #8
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by arcana_x View Post
    But these methods seem great. I needed a class changing feature just for a little thing im doing for myself. Ive always been firm in my ways that i MUST not use javascript in my commercial websites as far as the actual layout, design and navigation are concerned. I would only use it possibly for a small feature that wouldnt be crucial to the sites functionality.
    Ive thought this way for years!

    Out of interest, do you think im right to think like this. or are we now at a stage where javascript is pretty much enabled as standard and its worth using whenever needed without any need to worry. The year 2007 and everything!
    It's highly debatable, but all non-recreational sites should provide alternative functionality. There are still devices without script capability, and unexplained absence of functionality is inexcusable.
    JavaScript is about providing optional enhancements and reducing server load where practicable.

  9. #9
    &#083;itePoint Aficionado JVLB's Avatar
    Join Date
    Jan 2002
    Location
    N 44 56.537' W 123 3.683'
    Posts
    1,127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Logic Ali View Post
    . . . unexplained absence of functionality is inexcusable.
    Quite right, hence noscript tags. Some functionality, however, can only be provided with JavaScript and the user must realize that.


Bookmarks

Posting Permissions

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