- ベストアンサー
画像の表示非表示について質問です
画像の表示・非表示に関してですが、非表示にしたときその分だけ詰めるように表示はできないのでしょうか? 下記のサンプルでは、ボタンを押せば画像は消えますが消えた領域だけ不自然に残ります。 消えた領域分ボタンを上げてくることはできないのでしょうか? 以下サンプル //ここから <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> //ここまで
関連するQ&A
- ドキュメントを自ウィンドウに書き出したい
<html> <head> <script language="JavaScript"> <!-- function doc() { document.write("JavaScript"); } //--> </script> </head> <body bgcolor="#ffffff"> <form name="form1"> <input type="button" value="ボタン" onClick="doc()"> </form> </body> </html> 上のプログラムの場合ボタンを押すとボタンが消えJavaScriptと書き出されてしまうのですが、ボタンの下に書き出すにはどうしたらよいのでしょうか?結果として以下のように表示させたいのですがどうしたらよいのでしょうか? <html> <head> </head> <body bgcolor="#ffffff"> <form name="form1"> <input type="button" value="ボタン"> <p>JavaScript</p> </form> </body> </html> これらのプログラムは自作のものです。
- ベストアンサー
- JavaScript
- クリックするとボタンの中の文字が変わるようにしたいんですが一応コードは出来たんですが・・うまくうごかなくて困ってます。
java スクリプトのONCLICKについて質問があります。 ONCLICKのあとに何個もオプションはつけられないのでしょうか? <INPUT TYPE="button" VALUE=" " ONCLICK="form1.Q8.value += '1';" style="font-size:40pt"><br> にボタンをクリックするとボタンの中に「○」を表示するようにしたいんですが、うまくいきません・・・ 一応こう感じにつくってみたんですが・・・ <html> <head> <title></title> </head> <body> <script type="text/javascript"> function change_label(){ document.form1.label1.value = " ○ "; } </script> <form name="form1"> <input type="hidden" name="Q8" value=""><br> <input type="button" name="label1" value="クリックしてね" onclick="form1.Q8.value += '1';change_label();"> <input type="submit" name="Q9b" value="次へ" style="font-size:25pt"> </form> </body> </html> もしよろしければアドバイスいただけませんでしょうか・・・・
- 締切済み
- JavaScript
- ボタンを押した回数を表示するには
HTML内に <head> <script language="vbscript"> </script> </head> <body> <input type="button" onclick="MsgBox('押しましたね')" value="Please"> </body> こんなタグでボタンを押させた場合 そのボタンを押した累積回数を表示させる方法はないでしょうか よろしくご教示お願いいたします
- 締切済み
- HTML
- 同じwindowの別formにURLを表示したい
はじめまして。 ボタンをクリックしたら、ボタンの下の領域に指定したURLの内容を表示したいのですが、希望した動作にならず困っています。 具体的には下のソースのように form を2つ作成し、"F1" に表示されているボタンをクリックされたら、"F2" にURLの内容が表示されたらいいなぁと考えています。 初めて HTML を触っているもので、考えられない変な事をしているかもしれませんが、何かヒントでも教えていただけると、大変うれしく思います。 よろしくお願いいたします。 <環境> OS:winXP pro ブラウザ:IE6 sp1 <html> <head> <script type="text/javascript"> <!-- function onClick_B1(){ window.open("http://www.goo.ne.jp/","F2"); } // --> </script> </head> <body> <form name="F1"> <input type="button" name="B1" value="Go" onClick="onClick_B1()"> <hr> </form> <form name="F2"> </form> </body> </html>
- ベストアンサー
- HTML
- フォームに表示される文字をセンタリングさせたい。
Javascriptの初心者です。宜しくお願いします。 テキストエリアが2つあったとします。 1のテキストエリアにある値を入力してボタンを押すと、 2のテキストエリアに1で入力した値をそのまま表示させ、 尚且つ表示された値をフォーム内でセンタリングさせたいのですが どうすればよいのかわかりません・・・。 ご存知の方がいらっしゃいましたら教えて下さい。 どうぞ宜しくお願い致します。 <html> <head> <script language="JavaScript"> <!-- function my1() { a=document.form1.text1.value; document.form1.text2.value=a; } //--> </script> </head> <body> <form name="form1"> <input type="texterea" name="text1"> <input type="texterea" name="text2"> <input type="button" value="CLICK!" onClick="my1()"> </form> </body> </html>
- 締切済み
- JavaScript
- レイヤーにある画像を変更したいです。
ボタンを押したらレイヤー内の画像を変更したいのですが 可能でしょうか? レイヤーでなければできるのですが・・ <html> <head> <SCRIPT language=JavaScript> <!-- function a(fishimg){ document.getElementById('layer1').images[0].src = fishimg; } //!---> </SCRIPT> </head> <body> <form name="form1"> <input type="button" onClick="a('fish2.gif')" value="レイヤーの画像を変えます。"> </form> <DIV id="layer1"> <IMG src="fish.gif"> </DIV> </body></html>
- ベストアンサー
- JavaScript
- ボタンを押すたびに画像を切り替えるには?
まずソースを載せます↓ <html> <head> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-type" content="text/html; charset=shift-jis"> <title>ボタンを押すたびに画像を表示します</title> <body bgcolor="#FFFFFF"> <script type="text/javascript"> function func1(str) { document.write('<img src="c:/MyImage/dog1.jpg" width="104" height="91" />'); } function func2(str) { document.write('<img src="c:/MyImage/dog2.jpg" width="104" height="91" />'); } function func3(str) { document.write('<img src="c:/MyImage/dog3.jpg" width="104" height="91" />'); } function func4(str) { document.write('<img src="c:/MyImage/dog4.jpg" width="104" height="91" />'); } </script> </head> <body bgcolor="#FFFFFF"> <form id="myForm" name="myForm"><p> <input type="button" value="ボタン1" name="button1"onclick="func1('dog1.jpg');"> <input type="button" value="ボタン2" name="button2"onclick="func2('dog2.jpg');"> <input type="button" value="ボタン3" name="button3"onclick="func3('dog3.jpg');"> <input type="button" value="ボタン4" name="button4"onclick="func4('dog4.jpg');"> </p></form> </body> </html> 今回の質問内容はボタンを押すたびに画像を表示するjavascriptプログラムです 画像はCドライブ直下のMyImageフォルダにdog1.jpg,,dog2.jpg,dog3.jpg, dog4.jpgを入れています なんで動かないのがわからないです 回答できたらよろしくお願いします
- ベストアンサー
- JavaScript
- JavaScriptで得た値を別ページに反映
JavaScriptで得た値を別ページに反映させたいと思っています。 同一ページでは上手くいきますが、別ページへの反映ができません。 教えてください、宜しくお願いします。 同一ページのサンプル <html> <head> <title>aa</title> <Script LANGUAGE='JavaScript'> <!-- function fncDisp() { label1.innerHTML = document.form1.txt.value; } --> </Script> </head> <body> <form name='form1' action=''> <div id='label1'>ここに表示</div> <input type='text' name='txt' value=''> <input type='button' name='btn' value='ボタン' onClick='fncDisp()'> </form> </body> </html>
- 締切済み
- JavaScript
- 押したボタンをdisabledにしたい。
ボタンを押したときに、 ボタンの表示を 灰色表示(disabled)に切り替えて、 押せないようにするには、 どうすればいいんでしょうか? ちなみにボタンはテーブルの中に入っています。 かなり省略したサンプルですが、 下に書き出しました。 <head> <script language="javascript"> <!-- function haiiro(){ alert("今、いま!ボタンをdisabled にできるといいな。"); } --> </script> </head> <body> <table> <tr> <td> <form name="frm"> <input name="btn" type="button" value="ボタン" onclick="haiiro();"> </form> </td> </tr> </table> </body>
- ベストアンサー
- JavaScript
- formタグって必要ですか?
<html> <head> <title>test</title> </head> <body> <form> <input type="button" value="文字" onclick="document.location = 'http://www';" /> </form> </body> </html> でも <html> <head> <title>test</title> </head> <body> <input type="button" value="文字" onclick="document.location = 'http://www/';" /> </body> </html> でも、問題なく動くのですが、formタグって必要ですか?
- ベストアンサー
- HTML
お礼
回答ありがとうございます。 何とかできました