www.webdeveloper.com
Results 1 to 6 of 6

Thread: Hiding HTML Content and Displaying it With JavaScript?

  1. #1
    Join Date
    Dec 2007
    Location
    Mississippi
    Posts
    1,063

    Hiding HTML Content and Displaying it With JavaScript?

    Here's what I want to do. In my site header, I want to have some text. Then, using the onMouseOver event, display a HTML table containing different information when the user moves his or her mouse over that text. And, of course, use the onMouseOut event to hide it once again when they move their cursor away. Kind of like a rollover image, I suppose.

    Is there a way to do this with JavaScript? If there is, can someone point me in the right direction?

  2. #2
    Join Date
    Mar 2007
    Posts
    946
    What you want to do is change the display style fo that element with javascript. When you mouse over it the style needs to be display: block; and when you mouse out it will be display: none;.

  3. #3
    Join Date
    Dec 2007
    Location
    Mississippi
    Posts
    1,063
    I figured it was something like that. How exactly would you access the style properties with JavaScript?

  4. #4
    Join Date
    Mar 2007
    Posts
    946
    You use the document.getElementById() function.

    PHP Code:
    javascript
    document
    .getElementById('myDivId').style.display 'none';

    html
    <div id="myDivId">
    Stuff
    </div

  5. #5
    Join Date
    Dec 2007
    Location
    Mississippi
    Posts
    1,063
    Think you could show me what I'm doing wrong?

    HTML Code:
    <p onMouseOver="document.getElementById(houses).style.display = 'block';"><b>SOME TEXT</b></p>
         
         <br> <br>
         
         <table border="8" id="houses" style="display: none;">
         
           <tr>
           
             <td>BLAH BLAH BLAH</td>
             
             <td>MORE MORE MORE</td>
             
           </tr>
           
         </table>
    It doesn't display when I mouse over the paragraph

  6. #6
    Join Date
    Mar 2007
    Posts
    946
    You need to put quotes around houses in the getElementByID function.
    PHP Code:
    <p onMouseOver="document.getElementById('houses').style.display = 'block';">
    <
    b>SOME TEXT</b></p>
      <
    br> <br>  
    <
    table border="8" id="houses" style="display: none;">  
    <
    tr>  <td>BLAH BLAH BLAH</td>  <td>MORE MORE MORE</td>  </tr>  </table

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles