ホームページ作成ＴＯＰ > 画像 > 画像を表示しない様にする
画像を表示しない様にする
画像を表示しない様にする方法です。
使用方法は色々ですが、頻繁に使用されているのがロールオーバーで別々の画像を切り替える場合に、画像を最初から読み込み必要な時に表示させる方法です。
このページでは、サンプルにある様に２通りを説明します。
- 表示してあるはずの場所も無くなる。
- 表示してあるはずの場所は残り、画像だけが表示されなくなる。
sample
指定方法の違いを見るために、画像自体は、<p>〜</p>の中に入れて枠線で囲ってあります。
↓指定なし↓
↓display:noneで指定↓
↓visibility:hiddenで指定↓
ＨＴＭＬ
スタイルシートにて行います。
ホームページ作成ＴＯＰ > 画像 > 画像を表示しない様にする > このページのＴＯＰ ▲
スタイルシート（その１） display:none
画像を表示しない様にするには、display:noneを画像部分に対して指定します。
この方法の場合には、サンプルにある様に表示してあるはずの場所も無くなる様になります。
（サンプルでは、枠線部分だけが残ってます。）
要素に直接書く
書き方は
<img src="画像" width="サイズ" height="サイズ" alt="" style="display:none">
ホームページ作成ＴＯＰ > 画像 > 画像を表示しない様にする > このページのＴＯＰ ▲
headに書く
書き方は
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
<!--
img { display:none }
-->
</style>
</head>
<body>
<img src="画像" width="サイズ" height="サイズ" alt="">
</body>
</html>スタイルシート（その２） visibility:hidden
こちらの方法もvisibility:hiddenを画像部分に対して指定します。
この方法の場合には、サンプルにある様に表示してあるはずの場所は残り、画像だけが表示されなくなります。
（サンプルでは、枠線部分だけが残ってます。）
要素に直接書く
書き方は
<img src="画像" width="サイズ" height="サイズ" alt=""
style="visibility:hidden">
ホームページ作成ＴＯＰ > 画像 > 画像を表示しない様にする > このページのＴＯＰ ▲
headに書く
書き方は
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
<!--
img { visibility:hidden }
-->
</style>
</head>
<body>
<img src="画像" width="サイズ" height="サイズ" alt="">
</body>
</html>ホームページ作成ＴＯＰ > 画像 > 画像を表示しない様にする > このページのＴＯＰ ▲
