0
Welcome Guest! Login
0 items Join Now

onmouseover Event. Display or Hide different paragraphs???

Last Post
Search Topic
    • Pako's Avatar
    • Pako
    • Sr. Rocketeer
    • Posts: 198
    • Thanks: 13

    onmouseover Event. Display or Hide different paragraphs???

    Posted 14 years 6 months ago
    • I am looking at having this paragraph:

      With 61 years of combined experience.....You'll get the Best Service from the Best Agents, and the Best Policies from the Best Companies at the Best Price.
      We have your Best Interest at heart.

      [1]Best Service. We treat each customer situation as if we were you. We make sure you get the right coverage at a budget that makes sense for you and your family. Our goal is to not to sell you insurance, it’s to put you in a situation where if something bad does happen your covered. We’ve built our agency to one of the fastest growing in the Flathead by simply putting our customers’ interests ahead of everything else.

      [2]Best Agents. Each of our agents specializes in particular lines of insurance, most have decades of experience in their field, and all are experts in the lines of insurance available. As a result, our agents get you the right insurance the first time. Finally, our agents make sure that you and your family don’t ever get left out in the cold should the unimaginable happen.
      The idea, is that when you scroll over "Best Service" in the top paragraph, the bottom [1] paragraph detail displays, while the rest remain hidden. When they scroll over "Best Agents", the bottom [2] paragraph detail displays, while the rest remain hidden.

      Can anyone point me in the right direction for a cross browser solution that will play nicely with Rocketthemes and doesn't involve Flash?

      I am trying to accomplish this with the following code:
      <html>
  <head>
     <script>
       function layerSetup(id,visibility){
          if(document.getElementById){
            this.obj = document.getElementById(id).style;
            this.obj.visibility = visibility;
            return this.obj;}
          else if(document.all){
            this.obj = document.all[id].style;
            this.obj.visibility = visibility;
            return this.obj;}
          else if(document.layers){
            this.obj = document.layers[id];
            this.obj.visibility = visibility;
            return this.obj;}
       }
       function visVisible(param){
          new layerSetup(param,'visible');
       }
       
       function visHidden(param){
          new layerSetup(param,'hidden');
       }
     </script>
  </head>
  
  <body>
     <p><a href="#" onMouseOver="visVisible('id1')" onMouseOut="visHidden('id1')">SHOW1</a> 
       <a href="#" onMouseOver="visVisible('id2')" onMouseOut="visHidden('id2')">SHOW2</a>
       <a href="#" onMouseOver="visVisible('id3')" onMouseOut="visHidden('id3')">SHOW3</a><br />
     </p>
     <div id="id1" style="visibility: hidden;">Hidden Content 1</div>
     <div id="id2" style="visibility: hidden;">Hidden Content 2</div>
     <div id="id3" style="visibility: hidden;">Hidden Content 3</div>     
  </body>
</html>​

      But as you can see, I am wrapping all the hidden elements in a <div> tag, but the problem is I need each hidden element to be displayed in the same space. I can't have them dropping a line down every time. Thought?

      Your help will be greatly appreciated! :)
    #579584

Time to create page: 0.050 seconds