SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Feb 2013
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Onmouseover text

    Hi,

    can you please tell me how can I do onmouseover text in java like on wbesite "volvocars.com"?
    http://www.volvocars.com/Pages/default.aspx

    Or which javascript I have to used?

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,177
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Do you mean the menu dropdown that responds to clicks? I don't see any mouseover effects.

  3. #3
    SitePoint Member
    Join Date
    Feb 2013
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Howdy,

    Quote Originally Posted by forestq View Post
    can you please tell me how can I do onmouseover text in java like on wbesite "volvocars.com"?
    You can do this with CSS and JavaScript

    CSS:
    Tutorial: http://tympanus.net/codrops/2012/02/...ion-with-css3/
    Demo: http://tympanus.net/Tutorials/CSS3Accordion/

    JS:
    http://www.1stwebdesigner.com/freebi...nus-tutorials/

    Hope that helps.


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
  •