- ベストアンサー
画像の表示非表示について質問です
画像の表示・非表示に関してですが、非表示にしたときその分だけ詰めるように表示はできないのでしょうか？ 下記のサンプルでは、ボタンを押せば画像は消えますが消えた領域だけ不自然に残ります。 消えた領域分ボタンを上げてくることはできないのでしょうか？ 以下サンプル //ここから <html> <head> <title>Sample</title> <script type="text/javascript"><!-- function visImage(vType) { document.images["photo"].style.visibility = vType; } // --></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> //ここまで
- googleoooo
- お礼率46% (74/160)
- JavaScript
- 回答数4
- ありがとう数7
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
win版IEではvisibility:collapseは実装されていませんね。 なのでdisplay:noneを利用する方が良いと思います。 element.style.display = 'none' の場合 //ここから <html> <head> <title>Sample</title> <script type="text/javascript"><!-- function visImage(vType) { //↓visibilityではなくdisplay //document.images["photo"].style.visibility = vType; document.images["photo"].style.display = vType; } // --></script> </head> <body> <img src="photo.jpg" name="photo"> <form> <!-- ↓visibleではなくinlineを渡す --> <!--input type="button" value="画像を表示する" onClick="visImage('visible')"--> <input type="button" value="画像を表示する" onClick="visImage('inline')"> <!-- ↓noneは文字列として渡す --> <!--input type="button" value="画像を消す" onClick="visImage(none)"--> <input type="button" value="画像を消す" onClick="visImage('none')"> </form> </body> </html> //ここまで imgタグはインラインレベルの要素なので表示する場合はinlineとします。 ブロックレベル要素の場合はblockとします。
その他の回答 (3)
ちょっと似たような質問に答えたので使えるかも？ <!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>
お礼
回答ありがとうございます。 サンプルまでつけて頂いてありがとうございました
- zxcv0000
- ベストアンサー率56% (111/196)
あっと、 display を使って非表示にするのは 'none' ですが、それを表示に戻すのは 'visible' ではありません。 元々 display が指定されていない tag なので、空文字列指定が無難かと。 element.style.display = ''; あるいは、'none' にする前の値を再表示に備えて記憶しておくのが本格的かと思います。 (対応できる場面やブラウザが増えるでしょう)
お礼
回答ありがとうございます そうだったのですか。
- zxcv0000
- ベストアンサー率56% (111/196)
非表示を element.style.visibility = 'hidden' で実現されていますが、代りに以下を試してみてください。 element.style.display = 'none' または element.style.visibility = 'collapse' P.S. 私の InternetExploler6 は、visibility = 'collapse' でエラーします。
お礼
回答ありがとうございます 以下のようにすればいいのでしょうか？ 理解が間違ってたらご指摘お願いします。 以下2つとも次のようなエラーが出ました IE7を使用しています --------------------------------------------------- ライン：7 文字：2 エラー：visibility プロパティの値を取得できませんでした。引数が無効です。 コード:0 --------------------------------------------------- element.style.display = 'none' の場合 //ここから <html> <head> <title>Sample</title> <script type="text/javascript"><!-- function visImage(vType) { document.images["photo"].style.visibility = vType; } // --></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"><!-- function visImage(vType) { document.images["photo"].style.visibility = vType; } // --></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> //ここまで
お礼
回答ありがとうございます。 何とかできました