Click to return to the DHTML, HTML     
vertical-align Attribute ...     visited Pseudo-class     DHTML Properties    
Web Workshop  |  DHTML, HTML & CSS

visibility Attribute | visibility Property


Sets or retrieves whether the content of the object is displayed.

Syntax

HTML{ visibility: sVisibility }
Scriptingobject.style.visibility [ = sVisibility ]

Possible Values

sVisibility String that specifies one of the following values:
inheritObject inherits the visibility of the next parent object.
visibleObject is visible.
hiddenObject is hidden.

The property is read/write with a default value of inherit; the cascading style sheets (CSS) attribute is not inherited unless the value is set to inherit.

Expressions can be used in place of the preceding value(s), as of Microsoft® Internet Explorer 5. For more information, see Dynamic Properties.

Remarks

Unlike display:none, objects that are not visible still reserve the same physical space in the content layout as they would if they were visible. You can change the visibility through scripting to show and hide overlapping content based on user interaction. For a child object to be visible, the parent object also must be visible. For document style scripting information, see Dynamic Styles.

Example

The following examples use the visibility attribute and the visibility property to determine whether the object is visible.

This example uses two calls to an embedded (global) style sheet to hide and then show the image when the user moves the mouse over and off the text.

Sample Code

<STYLE>
    .vis1 { visibility:visible }
    .vis2 { visibility:hidden }
</STYLE>
</HEAD>
<BODY> 
<IMG ID="oSphere" SRC="sphere.jpg">
<P onmouseover="oSphere.className='vis2'" 
   onmouseout="oSphere.className='vis1'">
   Move the mouse over this text to make the sphere   
   disappear.</P>

This feature requires Internet Explorer 4.0 or later. Click the icon below to install the latest version. Then reload this page to view the sample.
Microsoft Internet Explorer

This example uses a call to a function to hide the image.

<SCRIPT>
function disappear()
{
    oSphere.style.visibility="hidden"; 
    }
function reappear()
{
    oSphere.style.visibility="visible"; 
    }
</SCRIPT>
</HEAD>
<BODY>
<IMG SRC="sphere.jpeg" ID="oSphere">
Move the mouse over <SPAN ID="oTxt" onmouseover="disappear()" 
    onmouseout="reappear()"> this text</SPAN> 
    to see the sphere disappear.

This feature requires Internet Explorer 4.0 or later. Click the icon below to install the latest version. Then reload this page to view the sample.
Microsoft Internet Explorer

Applies To

[ Object Name ]
PlatformVersion
Win16:
Win32:
Mac:
Unix:
WinCE:
A, ADDRESS, APPLET, B, BIG, BLOCKQUOTE, BODY, BUTTON, CAPTION, CENTER, CITE, CODE, COL, COLGROUP, currentStyle, custom, DD, DFN, DIR, DIV, DL, DT, EM, EMBED, FIELDSET, FORM, Hn, HR, HTML, I, IFRAME, IMG, INPUT type=button, INPUT type=checkbox, INPUT type=file, INPUT type=image, INPUT type=password, INPUT type=radio, INPUT type=reset, INPUT type=submit, INPUT type=text, ISINDEX, KBD, LABEL, LEGEND, LI, LISTING, MARQUEE, MENU, OBJECT, OL, P, PRE, runtimeStyle, S, SAMP, SELECT, SMALL, SPAN, STRIKE, STRONG, style, SUB, SUP, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TR, TT, U, UL, VAR, XMP


Back to topBack to top

Did you find this topic useful? Suggestions for other topics? Write us!

© 1999 Microsoft Corporation. All rights reserved. Terms of use.