画像の表示非表示について質問です

解決済

質問者：googleoooo
質問日時：2008/12/21 05:33
回答数：4件

画像の表示・非表示に関してですが、非表示にしたときその分だけ詰めるように表示はできないのでしょうか？
下記のサンプルでは、ボタンを押せば画像は消えますが消えた領域だけ不自然に残ります。
消えた領域分ボタンを上げてくることはできないのでしょうか？
以下サンプル
//ここから
<html>
<head>
<title>Sample</title>
<script type="text/javascript"></script>
</head>
<body>
<img src="photo.jpg" name="photo">
<form>
<input type="button" value="画像を表示する" onClick="visImage('visible')">
<input type="button" value="画像を消す" onClick="visImage('hidden')">
</form>
</body>
</html>
//ここまで

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： OKbokuzyo
回答日時：2008/12/21 12:28

win版IEではvisibility:collapseは実装されていませんね。

なのでdisplay:noneを利用する方が良いと思います。

element.style.display = 'none'　の場合
//ここから
<html>
<head>
<title>Sample</title>
<script type="text/javascript"></script>
</head>
<body>
<img src="photo.jpg" name="photo">
<form>


<input type="button" value="画像を表示する" onClick="visImage('inline')">



<input type="button" value="画像を消す" onClick="visImage('none')">
</form>
</body>
</html>
//ここまで

imgタグはインラインレベルの要素なので表示する場合はinlineとします。
ブロックレベル要素の場合はblockとします。

- 0
- 件

通報する

この回答へのお礼

回答ありがとうございます。
何とかできました

通報する

お礼日時：2008/12/21 21:26

No.4

回答者： _pipi_
回答日時：2008/12/21 15:13

ちょっと似たような質問に答えたので使えるかも？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title>TEST</title>

<div>
<img src="photo.jpg" width="200" height="100" alt="fumei" id="photo">
<form>
<p>
<input type="button" value="画像を表示する" onClick="changeDisplay(this,'photo')">
</p>
</form>
</body>

<script type="text/javascript">

function changeDisplay( btn, element ){
if( typeof( element ) == 'string' ) element = document.getElementById( element );
var f = element.style.display == 'none';
btn.value = f? '画像を消す': '画像を表示する';
element.style.display = f? 'inline': 'none';
}
</script>

- 0
- 件

通報する

この回答へのお礼

回答ありがとうございます。
サンプルまでつけて頂いてありがとうございました

通報する

お礼日時：2008/12/21 21:23

No.3

回答者： zxcv0000
回答日時：2008/12/21 13:30

あっと、 display を使って非表示にするのは 'none' ですが、それを表示に戻すのは 'visible' ではありません。

元々 display が指定されていない tag なので、空文字列指定が無難かと。

element.style.display = '';

あるいは、'none' にする前の値を再表示に備えて記憶しておくのが本格的かと思います。 (対応できる場面やブラウザが増えるでしょう)

- 0
- 件

通報する

この回答へのお礼

回答ありがとうございます
そうだったのですか。

通報する

お礼日時：2008/12/21 21:25

No.1

回答者： zxcv0000
回答日時：2008/12/21 08:12

非表示を element.style.visibility = 'hidden' で実現されていますが、代りに以下を試してみてください。

element.style.display = 'none'
または
element.style.visibility = 'collapse'

P.S. 私の InternetExploler6 は、visibility = 'collapse' でエラーします。

参考URL：http://www.y-adagio.com/public/standards/tr_css2 …

- 0
- 件

通報する

この回答へのお礼

回答ありがとうございます
以下のようにすればいいのでしょうか？
理解が間違ってたらご指摘お願いします。
以下2つとも次のようなエラーが出ました
IE7を使用しています
---------------------------------------------------
ライン：7
文字：2
エラー：visibility プロパティの値を取得できませんでした。引数が無効です。
コード:0
---------------------------------------------------

element.style.display = 'none'　の場合
//ここから
<html>
<head>
<title>Sample</title>
<script type="text/javascript"></script>
</head>
<body>
<img src="photo.jpg" name="photo">
<form>
<input type="button" value="画像を表示する" onClick="visImage('visible')">
<input type="button" value="画像を消す" onClick="visImage(none)">
</form>
</body>
</html>
//ここまで

element.style.visibility = 'collapse'
//ここから
<html>
<head>
<title>Sample</title>
<script type="text/javascript"></script>
</head>
<body>
<img src="photo.jpg" name="photo">
<form>
<input type="button" value="画像を表示する" onClick="visImage('visible')">
<input type="button" value="画像を消す" onClick="visImage('collapse')">
</form>
</body>
</html>
//ここまで