Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New to the CF scene
    Join Date
    Jun 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Changing all classes in html on mouseover

    Hello,

    I'm trying to get together a method to change all classes of the rolled over object to another class and I need a place to start.

    For example:

    <td class="a">Hello</td>
    <td class="b">Bye</td>
    <td class="a">Au Revoir</td>

    I want it so that if I mouseover "Hello", it will change the class for Hello and it will also change the class for Au Revoir since they are of the same class. And so forth for the rest of the document.

    Any ideas?
    Thank you!

  • #2
    Regular Coder
    Join Date
    Jul 2005
    Posts
    116
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Recently I've been looking into JQuery. It should handle what you want to do.

  • #3
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,707
    Thanks
    0
    Thanked 237 Times in 232 Posts
    Hi there ezarikian,

    and a warm welcome to these forums...
    Have a look at this example, it may give you some ideas...
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>switch className onmouseover</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
    <style type="text/css">
    /*<![CDATA[*/
    .a {
        line-height:62px;
        width:100px;
        background-color:#000;
        color:#fff;
        text-align:center;
        margin:5px 0;
     }
    .b {
        line-height:62px;
        width:100px;
        background-color:#0f0;
        color:#f00;
        text-align:center;
        margin:5px 0;
     }
    .c {
        line-height:62px;
        width:100px;
        background-color:#00f;
        color:#f90;
        text-align:center;
        margin:5px 0;
     }
    .aa {
        line-height:62px;
        width:100px;
        border:1px solid #000;
        background-color:#fff;
        color:#000;
        text-align:center;
        margin:4px auto;;
     }
    .bb {
        line-height:62px;
        width:100px;
        border:1px solid #0f0;
        background-color:#f00;
        color:#0f0;
        text-align:center;
        margin:4px auto;
     }
    .cc {
        line-height:62px;
        width:100px;
        border:1px solid #00f;
        background-color:#f90;
        color:#00f;
        text-align:center;
        margin:4px auto;
     }
    /*//]]>*/
    </style>
    
    <script type="text/javascript">
    //<![CDATA[
    window.onload=function() {
    
       dv=document.getElementsByTagName('*');
    
    for(c=0;c<dv.length;c++) {
    
    dv[c].onmouseover=function() {
    
       cn=this.className;
    for(c=0;c<dv.length;c++) {
    if(cn==dv[c].className) {
    
    switch(cn) {
       case 'a':
       dv[c].className='aa';
       break;
    
       case 'b':
       dv[c].className='bb';
       break;
    
       case 'c':
       dv[c].className='cc';
       break;
          }
         }
        }
       }
      }
     }
    //]]>
    </script>
    
    </head>
    <body>
    
    <div class="a">hello</div>
    <div class="b">tom</div>
    <div class="c">apple</div>
    
    <p class="a">au revoir</p>
    <p class="b">dick</p>
    <p class="c">plum</p>
    
    <div class="a">cherio</div>
    <div class="b">harry</div>
    <div class="c">cherry</div>
    
    <p class="a">bye</p>
    <p class="b">fred</p>
    <p class="c">grape</p>
    
    </body>
    </html>
    coothead

  • #4
    New to the CF scene
    Join Date
    Jun 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Wow this is nice! Would a onmouseoff work in the same manner? Like returning the classes back to what it was before?

    Quote Originally Posted by coothead
    Hi there ezarikian,

    and a warm welcome to these forums...
    Have a look at this example, it may give you some ideas...
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>switch className onmouseover</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
    <style type="text/css">
    /*<![CDATA[*/
    .a {
        line-height:62px;
        width:100px;
        background-color:#000;
        color:#fff;
        text-align:center;
        margin:5px 0;
     }
    .b {
        line-height:62px;
        width:100px;
        background-color:#0f0;
        color:#f00;
        text-align:center;
        margin:5px 0;
     }
    .c {
        line-height:62px;
        width:100px;
        background-color:#00f;
        color:#f90;
        text-align:center;
        margin:5px 0;
     }
    .aa {
        line-height:62px;
        width:100px;
        border:1px solid #000;
        background-color:#fff;
        color:#000;
        text-align:center;
        margin:4px auto;;
     }
    .bb {
        line-height:62px;
        width:100px;
        border:1px solid #0f0;
        background-color:#f00;
        color:#0f0;
        text-align:center;
        margin:4px auto;
     }
    .cc {
        line-height:62px;
        width:100px;
        border:1px solid #00f;
        background-color:#f90;
        color:#00f;
        text-align:center;
        margin:4px auto;
     }
    /*//]]>*/
    </style>
    
    <script type="text/javascript">
    //<![CDATA[
    window.onload=function() {
    
       dv=document.getElementsByTagName('*');
    
    for(c=0;c<dv.length;c++) {
    
    dv[c].onmouseover=function() {
    
       cn=this.className;
    for(c=0;c<dv.length;c++) {
    if(cn==dv[c].className) {
    
    switch(cn) {
       case 'a':
       dv[c].className='aa';
       break;
    
       case 'b':
       dv[c].className='bb';
       break;
    
       case 'c':
       dv[c].className='cc';
       break;
          }
         }
        }
       }
      }
     }
    //]]>
    </script>
    
    </head>
    <body>
    
    <div class="a">hello</div>
    <div class="b">tom</div>
    <div class="c">apple</div>
    
    <p class="a">au revoir</p>
    <p class="b">dick</p>
    <p class="c">plum</p>
    
    <div class="a">cherio</div>
    <div class="b">harry</div>
    <div class="c">cherry</div>
    
    <p class="a">bye</p>
    <p class="b">fred</p>
    <p class="c">grape</p>
    
    </body>
    </html>
    coothead

  • #5
    New to the CF scene
    Join Date
    Jun 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Mongus
    Recently I've been looking into JQuery. It should handle what you want to do.
    Thank you very much. This might help what I am trying to accomplish. I will need to read the documentation a bit more though!

  • #6
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,707
    Thanks
    0
    Thanked 237 Times in 232 Posts
    Hi there ezarikian,

    try it like this...
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
    <style type="text/css">
    /*<![CDATA[*/
    .a {
        line-height:62px;
        width:100px;
        background-color:#000;
        color:#fff;
        text-align:center;
        margin:5px 0;
     }
    .b {
        line-height:62px;
        width:100px;
        background-color:#0f0;
        color:#f00;
        text-align:center;
        margin:5px 0;
     }
    .c {
        line-height:62px;
        width:100px;
        background-color:#00f;
        color:#f90;
        text-align:center;
        margin:5px 0;
     }
    .aa {
        line-height:62px;
        width:100px;
        border:1px solid #000;
        background-color:#fff;
        color:#000;
        text-align:center;
        margin:4px auto;;
     }
    .bb {
        line-height:62px;
        width:100px;
        border:1px solid #0f0;
        background-color:#f00;
        color:#0f0;
        text-align:center;
        margin:4px auto;
     }
    .cc {
        line-height:62px;
        width:100px;
        border:1px solid #00f;
        background-color:#f90;
        color:#00f;
        text-align:center;
        margin:4px auto;
     }
    /*//]]>*/
    </style>
    
    <script type="text/javascript">
    //<![CDATA[
    window.onload=function() {
    
       dv=document.getElementsByTagName('*');
    
    for(c=0;c<dv.length;c++) {
    
    dv[c].onmouseover=function() {
    
       cn=this.className;
    for(c=0;c<dv.length;c++) {
    if(cn==dv[c].className) {
    
    switch(cn) {
       case 'a':
       dv[c].className='aa';
       break;
    
       case 'b':
       dv[c].className='bb';
       break;
    
       case 'c':
       dv[c].className='cc';
       break;
    
       case 'aa':
       dv[c].className='a';
       break;
    
       case 'bb':
       dv[c].className='b';
       break;
    
       case 'cc':
       dv[c].className='c';
       break;
          }
         }
        }
       }
      }
     }
    //]]>
    </script>
    
    </head>
    <body>
    
    <div class="a">hello</div>
    <div class="b">tom</div>
    <div class="c">apple</div>
    
    <p class="a">au revoir</p>
    <p class="b">dick</p>
    <p class="c">plum</p>
    
    <div class="a">cherio</div>
    <div class="b">harry</div>
    <div class="c">cherry</div>
    
    <p class="a">bye</p>
    <p class="b">fred</p>
    <p class="c">grape</p>
    
    </body>
    </html>
    coothead

  • #7
    New to the CF scene
    Join Date
    Jun 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks!

    I'm still trying to get it so that it's a onmouseoff event... I know its hard for this example since you are actually moving the object around.. but what if its just to change color? Would two functions be possible? One for a mouseoff one for a mouseover?

  • #8
    Senior Coder
    Join Date
    Jul 2005
    Location
    New York, NY
    Posts
    1,084
    Thanks
    4
    Thanked 19 Times in 19 Posts
    Actually, instead of looping over everything, which is very costly for even moderately sized pages, I would recommend changing the definition of the class itself. JavaScript can manipulate stylesheets and their rules. So you could basically change the definition of the class a onmouseover and change it back onmouseout.

    From:
    http://www.javascriptkit.com/dhtmltu...ernalcss.shtml

    Code:
    var crossrule;
    var ss = document.styleSheets[0];
    
    if (document.styleSheets[0].cssRules)
      crossrule=document.styleSheets[0].cssRules
    else if (document.styleSheets[0].rules)
      crossrule=document.styleSheets[0].rules
    
    for (i=crossrule.length - 1; i >= 0; --i)
    {
      if (crossrule[i].selectorText.toLowerCase()==".a")
      {
        targetrule=crossrule[i];
        break;
      }
    }
    
    targetrule.style.color = "red";
    This isn't tested, and the speed of it will depend on the size of your external stylesheets, but they can be broken up. If your page is big, I would think this method of changing your stylesheet instead of looping over all elements would be faster.

  • #9
    New to the CF scene
    Join Date
    Jun 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hey again,

    I'm trying to work a javascript function that changes the class of an element on mouseover and back to normal on mouseout based on the contents of an xml file.

    <root>
    <element>
    <info>
    <name>Example</name>
    </info>
    <relationships>
    <child id="Example">A Child</child>
    <child id="Example">Another Child</child>
    </relationships>
    </element>

    <element>
    <info>
    <name>A Child</name>
    </info>
    </element>

    <element>
    <info>
    <name>Another Child</name>
    </info>
    </element>

    </root>

    I have these elements spread out into a table with different <td>'s, for example

    <table><tr><td>Example</td><td>Another Child</td><td><A Child></td></tr></table>

    I want it so that when I put my mouse over "Example," it does some kind of style adjustment to "Example," "Another Child", and "A Child" (i.e. all of the elements under its relationship node, and itself)... for example changing the background color of them or such.

    I suppose I'd have to load the xml file and pass the name of the element that is being rolled over into the function.

    Where things become foggy for me is
    1) How do I search through a document in javascript looking for a variable or a string match?
    2) What would be the easiest way to locate those children that need to be modified so that a style adjustment could be applied? I mean is there any way to target a td that has the value "A Child" in it using javascript? If that is possible I guess something like this could happen:

    1. Onmouseover, pass the name of the element mouse is on to a function
    2. Load the xml file
    3. Search for that name
    4. Read all the children
    5. Change the class attribute for each children to "highlight" or something along those lines.

    Thank you in advance!

  • #10
    New to the CF scene
    Join Date
    Jun 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Deleted by author
    Last edited by ezarikian; 07-17-2006 at 07:16 PM.


  •  

    Posting Permissions

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