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
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 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,313
    Mentioned
    178 Post(s)
    Tagged
    9 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
  •