リセット動作を使ってHTMLとJavaScriptで画像を上乗せ表示する方法
- HTMLとJavaScriptを使って、画像を上乗せ表示する方法について説明します。
- リセット処理を行う際に、他の部分の表示が消去されないようにする方法について教えます。
- 具体的な処理コードを示しながら、問題の解決方法を解説します。
- ベストアンサー
リセット動作
HTML、javaScript とも初心者です。 ベース画像に別の画像を上乗せした後、 その箇所の表示をベース画像だけに戻すためにリセット処理すると、 他の部分の表示が消去されてしまいます。 消去されないようにする方法を教えてください。 実際の処理： <form> <input type="button" value="RESET" onclick="rst"> </form> <script type="text/javascript"> function rst() { document.write("<img src='baseimage.png' style='position:absolute;top:100px;left:150px'>"); } </script> これを実行すると、baseimage の表示だけが残り、他の部分が消去されてしまいます。 消去されないようにする方法を教えてください。 よろしくお願いいたします。
- kiara007
- お礼率86% (26/30)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
昔手打ちしていた位しかやっていませんのでそこまで詳しくは無いのですが、とりあえずこちらで試してみました。 たしかに全体が消えますね。 (onclick="rst"の部分の修正の()が無かった部分を追加はしていますが) いくらか試行錯誤しましたが、divで囲んで、これにIDを指定してやってみたところ、 document.write() を document.all('AA').innerHTML = "<img src='baseimage.png'>" に変えてみたら、 おそらくやりたいことが出来たと思います。 write()でもやってみましたが、絵が映らなくなりますね。 divやspanを使うのが正しいかはわかりませんが、こんな感じでした。 以下、一応検証コードを置いておきます。 <html> <head></head> <body> a <form> <input type="button" value="RESET" onclick="rst();"> </form> b <div id='AA'> <!---<script type="text/javascript">---> <script type="text/javascript" language="javascript"> function rst() { //document.write("<img src='./baseimage.png' style='position:absolute;top:100px;left:150px'>"); //document.all('AA').write("<img src='./baseimage.png' style='position:absolute;top:100px;left:150px'>"); document.all('AA').innerHTML = "<img src='./baseimage.png' style='position:absolute;top:100px;left:150px'>"; } </script> </div> c </body> </html>
関連するQ&A
- フォームの動作についてお願いします！
<FORM NAME="form1"> <INPUT NAME="text1" TYPE="text"> <INPUT TYPE="button" value="表示" onclick="daialog()"> </FORM> <script language="JavaScript"> <!-- function daialog(){ alert(form1.text1.value) ; } --> </script> －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－ と上のようにテキストボックスの中身をアラートで返すスクリプトが あるのですが、検索ページ(google等)のようにボタンを押さずとも、 エンターキーを押せばdaialog()が呼びだされるようにするには どうすればいいでしょうか。。。 <FORM>に関係がありそうなのでJavaScriptのカテゴリにじゃないかも しれませんが、どなたかよろしくお願いします！！
- ベストアンサー
- JavaScript
- javascript form送信後の動作
以下のスクリプトでiframeにデータは送信できているんですが、<input type="text">に入力したテキストが残ってしまいます。どのように記述したらうまくいくでしょうか？ <script type="text/javascript"> function send(){ var frm=document.txt_submit; frm.submit(); frm.reset(); } </script> <form name="txt_submit" action="log.cgi" method="post" target="log" autocomplete="off"> <input type="text" name="ctxt" size="20" value=""> <input type="button" value="送信" onclick="return send();"> </form>
- ベストアンサー
- JavaScript
- レイヤー内のフォームの内容を変更するにはどうすれば？
JavaScriptを使って,テキストボックスに書かれている内容を変更できる様にしたいいのですが,フォームがレイヤー内にあるとうまく出来ません。 こちらがソースです。あくまで例です。ボタンをクリックすると書かれている内容が変わります。 <html> <head> <script lauguage="javascript"> function Form_Write(){ document.form.box.value="Click=true"; } </script> </head> <body> <div id=layer style="position:absolute;left:50px;top:50px;"> <form name="form"> <input type="text" name="box" size=20 value="Click=false"> <input type="button" name="button" value="click" onClick="Form_Write()"> </form> </div> </body> </html> これだとIEではうまく作動するのですが,NNだとうまく動きません。 document.layer.form.box.valueにしてもダメです。 document.layer.form has no propertiesというエラーが出ます。 どうすれば出来るのでしょうか？お助け願います。
- ベストアンサー
- JavaScript
- 画像の回転（ボタンで制御）
何も解っていなくてすいません。画像を回転したいのですが、STOPしてからSTARTボタンを押すと画像の位置がカクンと下のほうにずれてしまいます。下のコードもサンプルから引用したものにボタンで制御できないものかと付け足しただけで今ひとつ理解できていないかも知れません。こんな初心者ですが宜しくお願いします。 <link rel=stylesheet type="text/css" href="../css/style.css"> <script language="JavaScript"><!-- function myStart(){ // ボタンが押された sample.Start(); } function myStop(){ // ボタンが押された sample.Stop(); } // --></script> </head> <body> <object id=sample style="position:absolute; width:200px; height:200px;" classid="clsid:b6ffc24c-7e13-11d0-9b47-00c04fc2f51d"> </object> <img src="image/img.jpg" id=img1 style="filter:Redirect();"> <script language="JavaScript"> <!-- si = img1.filters[0].ElementImage(); sample.Image = si.Transform( sample.MeterLibrary.Rotate2RateDegrees(100)); sample.Start(); //--> </script> <form><input type="button" value="START" onclick="myStart()"></form> <form><input type="button" value="Stop" onclick="myStop()"></form>
- ベストアンサー
- JavaScript
- JavaScript動作仕様の変更！？
以前は動作していたものが最近のIEパッチ（？）で動作しなくなった気がします。もし解決方法があれば教えて下さい！ ------------------------------------- <HTML> <HEAD> <TITLE></TITLE> <SCRIPT type="text/javascript"> <!-- function test() { document.form.submit(); } function test2() { alert( "!!" ); return true; } --> </SCRIPT> </HEAD> <BODY> <FORM name="form" onSubmit="return test2()"> <INPUT type="button" value="おす" onClick="test()"> </FORM> </BODY> </HTML> ------------------------------------- 以前だと、JavaScriptでのsubmit()コマンドで、きちんとonSubmitイベントも動作していたハズなんですが、ここ数日でボタン部分を <INPUT type="submit" value="おす"> としないとonSubmitイベントが動作しなくなった様に思えます。ここ数日でWindowsUpdateした端末数台でチェックしましたが同様でした。
- ベストアンサー
- JavaScript
- 画像の表示非表示について質問です
画像の表示・非表示に関してですが、非表示にしたときその分だけ詰めるように表示はできないのでしょうか？ 下記のサンプルでは、ボタンを押せば画像は消えますが消えた領域だけ不自然に残ります。 消えた領域分ボタンを上げてくることはできないのでしょうか？ 以下サンプル //ここから <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> //ここまで
- ベストアンサー
- JavaScript
- input type="image"でマウスクリック画像変更がうまくいかない
input type="image" で表示した画像を変更したいのですがうまくいきません。 <form name="form1" action="" method="POST"> <input type="image" src="A.gif" name="A" onclick="ChangeImage();"> </form> <script language="javascript"> function ChangeImage(){ document.form1.A.src="B.gif" } </script> というコードをなんですが、ボタンをクリックしても何も起こりません。 アンカータグを使わずにinputで行いたいのですがどなたかご存じないでしょうか。よろしくお願いします。
- ベストアンサー
- HTML
- スマートフォンで自作javascriを動作させたい
最近発売されたAQUOS PHONE（スマートフォン）を使っています。 質問したいことは、 そのスマートフォンでhtmlファイルをローカルで開き、 Javascriptを正しく動作させるにはどうしたらいいのでしょうか？ PC上で作ったhtmlファイルをスマートフォンの 「ローカルファイル＞Documents＞SampleFiles」 の中に保存して開きました。 下記コードでhtmlの部分はちゃんと表示させられたのですが、 javascriptは動作しませんでした。 文字コードはShift_JISです。 <head> <script type="text/javascript"> function bbb(){ a1 = "ボタンをクリックするとhtmlに表示させる文字列、その１"; document.getElementById("ccc").innerHTML = a1; } function ddd(){ a2 = "ボタンをクリックするとhtmlに表示させる文字列、その２"; document.getElementById("eee").innerHTML = a2; } </script> </head> <form name="aaa"> <div> <p>ああああああああああああああああ</p> <input type="button" value="ボタン" onclick="bbb()"> <p id="ccc"></p> </div> <div> <p>いいいいいいいいいいいい</p> <input type="button" value="ボタン" onclick="ddd()"> <p id="eee"></p> </div> </form>
- ベストアンサー
- JavaScript
- 「本当に削除しますか」が正常に動作しない
このスクリプトで「本当に削除しますか？」のダイアログでキャンセルを押してもYahoo!に飛んでしまうんですが、 どうすればいいでしょうか？ <script language="JavaScript"> function kakunin(frm) { flag = confirm("本当に削除しますか?"); if (flag) { alert(flag); frm.submit(); } } </script> <form action="http://yahoo.co.jp/" method="get"> <input type="hidden" value="00001" name="num"> <input type="submit" value="削除" name="delete" onClick="return kakunin(this.form);return false;"> </form>
- ベストアンサー
- JavaScript
- textareaで入力した文字を改行したままで表示したいのですが。
textareaに複数行で入力した文字を改行したままで表示したいのですが 改行されずに表示されます。 改行したままで表示するのはどうすればいいでしょうか？ <HTML> <HEAD> <STYLE type="text/css"> <!-- INPUT {font-size: 12px;} --> </STYLE> <SCRIPT language="JavaScript"> <!-- function check(){ var strName; strName = document.nform.textN.value; var test = document.getElementById("test"); test.innerHTML = strName; } //--> </SCRIPT> </HEAD> <BODY> <FORM name="nform" > <textarea cols="30" rows="10" name="textN"></textarea> <input type="button" value=" 確認 " onClick="check()"> </FORM> <DIV id="test" style="position:absolute;font-size:24px;"> </DIV> </BODY> </HTML>
- ベストアンサー
- HTML
お礼
ご回答をお寄せいただきありがとうございます。 すごいです。私も目的を達成できることを確認しました。 改めて感謝いたします。