2008年07月25日

visibilityプロパティ スタイルシート、CSS

スポンサード リンク

visibilityプロパティは領域の表示、非表示を指定します。
非表示にしても、領域が無くなるわけではないので
ページのレイアウトは崩れません。

visibility : visible; 表示します。
visibility : hidden; 非表示にします。

  マウスを乗せてください

サンプルソース

<HTML>
<HEAD>
<TITLE>visibilityプロパティ ボックスの表示、非表示</TITLE>

<STYLE type="text/css">
<!--
.sub{
visibility : hidden; /*クラス名 sub領域 を非表示にします。*/
}
-->
</STYLE>

<SCRIPT language="JavaScript">
<!--
//マウスが乗ったら表示します。
function M_over(obj){
document.getElementById(obj).style.visibility="visible";
}
//マウスが去ったら非表示にします。
function M_out(obj){
document.getElementById(obj).style.visibility ="hidden";
}
//-->
</SCRIPT>

</HEAD>
<BODY>
<DIV onmouseover="M_over('sub1')" ; onmouseout="M_out('sub1')" style="background-color : #fbfda8;width : 180px;">マウスを乗せてください</DIV>
<BR/>
<DIV class="sub" id="sub1" style="width : 180px;"><IMG src="画像のURL"></DIV>
</BODY>
</HTML>

posted by javaScript at 15:37 | 大阪 ☀ | スタイルシート CSS | このブログの読者になる | 更新情報をチェックする
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。