#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2013
    Posts
    6
    Rep Power
    0

    Onmouseover text


    Hi,

    can you please tell me how can I do onmouseover text in java like on wbesite "volvocars.com"?

    Or which javascript I have to used?
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Loyal (3000 - 3499 posts)

    Join Date
    Dec 2004
    Posts
    3,008
    Rep Power
    376
    what do you mean by mouseover text? i went there and i hovered over the links and all that changed was the text colour.. what am i supposed to be looking at?

    i see when you click the link, some other links are visible..

    this is simple need jquery)
    Code:
    <script>
    $("#someid").click(function(){ 
    
       $("#hidden").toggle();  //here i think you can put in duration, etc
    });
    </script>
    <a id="someid">click</a>
    
    <div id="hidden">sS</div>
    Last edited by paulh1983; March 19th, 2013 at 12:29 PM.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2013
    Posts
    6
    Rep Power
    0
    when I click on the text/button, some text will be visible below the button, when I click once again the text will be invisible ,

    ex.

    Code:
        <style type="text/css">
        .zwin h2 {cursor:pointer;}
        </style>
    
        <script type="text/javascript">
    
        function zwin_init()
        {
           var obiekty = getElementsByClassName("zwin");
           
           for(var i=0;i<obiekty.length;i++)
           {
              obiekty[i].getElementsByTagName('p')[0].style.display="none";
              obiekty[i].getElementsByTagName('h2')[0].onclick = function() {zwin(this)};
              obiekty[i].getElementsByTagName('h2')[0].innerHTML += '<span>[+]</span>';
           }
        }
    
        function zwin(elem)
        {
           var obiekt = elem.parentNode.getElementsByTagName('p')[0];
    
           if(obiekt.style.display=="none")
           {
              elem.getElementsByTagName('span')[0].innerHTML = '[-]';
              obiekt.style.display="block";
           }
           else
           {
              elem.getElementsByTagName('span')[0].innerHTML = '[+]';
              obiekt.style.display="none";
           }
    
        }
    
        function getElementsByClassName(nazwa)//pobiera z dokumentu elementy o wskazanej nazwie clasy
        {
              var obiekty = document.getElementsByTagName('*');
              var wynik = [];
              for(var i=0;i<obiekty.length;i++)
              {
                 if(obiekty[i].className == nazwa)
                    wynik[wynik.length] = obiekty[i];
              }
              return wynik;
        }
        </script>
    
    
        <div class="zwin">
           <h2>Info</h2>
           <p>asd</p>
        </div>
    
    
        <div class="zwin">
           <h2>Info1</h2>
           <p>asd</p>
        </div>
    
    
        <script type="text/javascript">
           zwin_init();
        </script>
  6. #4
  7. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,176
    Rep Power
    184
    Originally Posted by forestq
    can you please tell me how can I do onmouseover text in java like on wbesite "volvocars.com"
    This is just basic CSS styling of the "a" tag. Here is a basic beginner's tutorial; on how to do this.

IMN logo majestic logo threadwatch logo seochat tools logo