フォームに入力された値で画像を変更する方法
- HTMLページのテーブル内の画像をフォームの入力値によって別の画像に変更する方法を教えてください。
- JavaScriptを使用してフォームの入力欄に画像のファイル名を入れ、ボタンを押すことで画像が変更される仕組みを作りたいです。
- 画像のファイル名の一部をフォームの入力値として受け取り、JavaScriptで画像のファイル名を作成する方法を教えてください。
- ベストアンサー
フォームに入力された値により画像を変更
【質問概要】 フォームのInput type="text"エリアに入れた文字列により、HTMLページのテーブル内の画像を他の画像に変更するにはどうすればよいかお分かりの方おられますか？ できれば、コードをお教え下さい。 しばらくJavascirptを使っていなかったためコードの書き方を忘れてしまいました。 【詳細】 例えば3つのgif画像ファイルを予めimgフォルダー内に用意しておきます。 画像名は、それぞれ test1.gif test2.gif test3.gif としておきます。 通常 この画像は、 <table> <tr> <td><img src="img/test1.gif"><td> <tr> </table> などでHTMLページに表示できると思いますが、このHTMLページに表示されている画像（test1.gif）をフォームの入力欄に他の画像のファイル名（test2.gif又はtest3.gif）を入れることによりtest2.gif又はtest3.gifに変更したいのです。もちろんJavascriptにアクションを起こさせるためにフォームに画像のファイル名を入れた後は、「画像変更」等の予め作成しておいたボタンを押す必要があると思いますが。 画像のファイル名を入力するフォームの入力欄設置場所は次の二つのタイプが必要です。 タイプ1： 画像を表示するHTMLページと同じページに設置してあるもの タイプ２： 画像を表示するHTMLページと別ウィンドウのHTMLページに設置してあるもの タイプ１とタイプ2は、別々のプログラムでかまいません。 また、画像の名前（test1.gif、test2.gif、test3.gif）は「.gif」部分が共通のため、「.gif」部分はフォームの入力欄に入力する必要がなくtest1, test2又はtest3と入力すればJavascirptの方で勝手に「.gif」部分は画像名に付加して処理するようにしたいのですが。 よろしくお願いします。 キャサリン
- kitty1000
- お礼率58% (353/606)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
別ウィンドウはサブウィンドウ(自身がopenした)でしょうか。 であるなら以下になります。 (エラー処理とか手抜きなので適宜追加してください。) ---------------- 【main.htm】 <html> <script> function changeImg(){ var img = document.getElementById("img"); var name = "img/" + document.getElementById("name").value + ".gif"; img.src = name; } </script> <body> <img src="img/sample1.gif" id="img"/> <input type="text" id="name"/> <input type="button" value="CHANGE" onclick="changeImg();"/> <input type="button" value="SUB" onclick="window.open('sub.htm');"/> </body> </html> ---------------- 【sub.htm】 <html> <script> function changeImg(){ var img = window.opener.document.getElementById("img"); var name = "img/" + document.getElementById("name").value + ".gif"; img.src = name; } </script> <body> <input type="text" id="name"/> <input type="button" value="CHANGE" onclick="changeImg();"/> </body> </html>
関連するQ&A
- フォームの値をうまく出力できない
フォーム(1.htm)で、質問と答えと入力し、 その結果を次のページ(2.asp)で表示させるASPを作成しました。 以下のように作成したいのですが、うまくいきません。 どうしたらいいのでしょうか。 宜しくお願いします。 ・質問と答えは10個入力されるとはかぎらない ・例えば７個入力されたとき、question1からquestion7まで入力されるとはかぎらない（question2が空欄で、question9に入力される場合もある） ・どのように入力された場合でも、qとaの画像は、q1.gif・a1.gifから 連続で表示されるようにする。 ・フォームで入力されたところを上から順番にq1.gif～、a1.gif～の画像を使って、2.aspに表示させる。 ****1.htm***** <form method="POST" action="2.asp"> <input name="question1" type="text"> <input name="answer1" type="text"> … <input name="question10" type="text"> <input name="answer10" type="text"> </form> ****2.asp************ question1 = Request.Form("question1") answer1 = Request.Form("answer1") … question10 = Request.Form("question10") answer10 = Request.Form("answer10") Response.Write ("<table>") Response.Write ("<tr>") Response.Write ("<td><img src= q1.gif></td>") Response.Write ("<td>" & question1 & "</td>") Response.Write ("</tr>") Response.Write ("<tr>") Response.Write ("<td><img src= a1.gif></td>") Response.Write ("<td>" & answer1 & "</td>") Response.Write ("</tr>") … Response.Write ("<tr>") Response.Write ("<td><img src= q10.gif></td>") Response.Write ("<td>" & question10 & "</td>") Response.Write ("</tr>") Response.Write ("<tr>") Response.Write ("<td><img src= a10.gif></td>") Response.Write ("<td>" & answer10 & "</td>") Response.Write ("</tr>") Response.Write ("</table>")
- ベストアンサー
- Microsoft ASP
- フォームからアップロードされた画像ファイルの処理
フォームからアップロードされてきた画像ファイルを、適当なファイル名を付けてJPGあるいはGIFの拡張子で保存し、HTMLファイルで保存した画像を一覧表示させようというCGIスクリプトを作りたいと考えています。 質問１ <FORM action="xxxx.cgi" method="post" enctype="multipart/form-data"> <INPUT type="file" name="gazo"> <INPUT type="submit"> </FORM> とこんな具合のフォームから画像ファイル（JPGやGIF）をアップロードした時、 受け手のxxxx.cgiでは、この画像ファイルのデータをどのように受けたらよいのでしょうか？ read(STDIN,$_,$ENV{'CONTENT_LENGTH'});としたり、 あるいは cgi-lib.plを読み込んで、$in{'gazo'} というような形で画像ファイルのデータを受け取ればよいのでしょうか？ 質問２ 画像ファイルを受け取ったとして、フォームから送られてきた画像ファイルがJPGなのかGIFなのかを判別することは可能でしょうか？ 可能ならば、判別するためのスクリプトはどんなものが考えられるでしょうか？ （フォームから送られてくる画像ファイルのデータの何をチェックすれば、JPGかGIFかを判別できるのでしょうか？） もしご回答頂ける方がおられればご教授ください。よろしくお願いします。 なお、「既存のスクリプトを利用しなさい」というような回答やアドバイスならば不要でございます。
- ベストアンサー
- Perl
- ソースをメソッドPOSTで取得すると値に「”」が入ってしまう。
<form action="test.php" method="post" >で<input type="text" />のなかに<img src="test.gif" />を入力してtest.phpで取得したデータをechoで書き出してみたら<img src=\"test.gif\" />と「\」が「"」の前に入ってしまって画像が表示されないのですが、どうしたらいいのかわからなくて困っています。どなたか教えてください。
- 締切済み
- PHP
- 画像ファイルが崩れる
Perlで、CGIを作成しています。 GIF画像をCGI経由で表示させようと思っているのですが、なぜか、画像が崩れてしまいます。GIFだけではなく、Jpegでも同じです。しかし、HTMLファイルの <img>タグでそのまま表示させようとすると、きちんと表示します。 どのようにすれば、崩れを抑えられますか? CGIソース---------------------- #!/usr/local/bin/perl $imgsrc="number/0.gif"; print "Content-type:image/gif\n\n"; open(IMG,$imgsrc); binmode(IMG); print <IMG>; close(IMG); -----------------------------EOF HTML---------------------------- <html> <head> </head> <body> <img src="cgi/image.cgi" width="28" hegiht="31"> </body> </html> ------------------------------EOF gif画像は、 http://www.akikobrand.com/icon/img/10/6/0.gif を使わせていただきました。(個人的な使用です)
- ベストアンサー
- CGI
- HTMLで入力すると・・・
ＨＴＭＬで画像を入れようとすると、うまくできません。ＨＴＭＬは、<IMG src="画像名.gif">でやっています。何でなのでしょうか？教えてください。
- 締切済み
- HTML
- 掲示板の入力フォームのずれ。
掲示板の入力フォームの「お名前、題名…」とかの見出しに替えて、自作ロゴを画像で入れてみたのですが、入力フォームの各窓が、ロゴから思い切り右に離れてずれてしまいました。 例えば、名前欄については、下記のように書いているのですが、どうすればよいでしょうか。 <TR> <TD><IMG SRC="●●●.gif"</TD> <TD><INPUT TYPE=text NAME=name SIZE=50></TD> </TR> お願いします。
- ベストアンサー
- CGI
- テキストエリアに画像ＵＲＬを貼り付ける入力支援
簡単なCGI日記を作成してますが、この入力フォームのテキストエリアに手動で画像ＵＲＬのタグを入れるのが手間なので、 ↓ サーバーにある画像一覧が別窓（違うファイルから）で表示されていて（実際には画像表示ですが・・・） <a href="sample1.gif"><img src="sample1.gif"></a> <a href="sample2.gif"><img src="sample2.gif"></a> <a href="sample2.gif"><img src="sample2.gif"></a> ↓ 画像をクリックするとＣＧＩのテキストエリア内に自動で <a href="sample1.gif"><img src="sample1.gif"></a>とタグを挿入するjavascriptってサンプルになるようなものはないでしょうか？
- 締切済み
- JavaScript
- アクセスのフォームに動画を入れたいと思っています。
アクセスのフォームに動画を入れたいと思っています。 手順については、こちらのサイトで下記を見つけたのでそれを参考にしました。 (1)GIF動画を貼り付けたHTMLファイルを作成します。 例えば、C:\test.htm (2)Microsoft Web Browserをフォームの中に埋め込みます。 例えば、『WebBrowser0』という名前にします。 (3)フォーム読み込み時にそのページを呼び出します。 Private Sub Form_Load() WebBrowser0.Navigate "C:\test.htm" End Sub これで、フォームを開いたときに、test.htmが表示されるはずです。表示サイズなどは調整してください。 ここまでが参考にした文章です。それで、下記が私の作成したVBAです。 Private Sub Form_Load() WebBrowser0.Navigate "test.htm" End Sub test.htmという画像をファイルに保存しました。プロパティはインターネットエクスプローラーで、ダブルクリックすると動画になっています。 しかし、アクセスに上記のコードを入力すると、 Web ページへのナビゲーションは取り消されました と表示されます。（WEBページのように見えますので、一応、WebBrowser0.Navigate は機能しているが、このtest.htmのファイルが何か悪いのでしょうか。 どなたか、何が間違いか教えていただけないでしょうか。
- ベストアンサー
- Visual Basic
- フォームに入力された値から、PHPでCSVデータを読んで表示させたい。
フォームに入力された値から、PHPでCSVデータを読んで表示させたい。 現在、PHPでお申し込みフォームを作成中なのですが、どこのページから来たかを判別するための値から、そこのページ名を表示させたいのですが、うまくできません。 CSVファイルには1列目に値、2列目にページ名が書かれたものが、50行あります。その中から、 例えば値が５だったら、5行目の2列目に書かれているページ名を表示させたいのですが、どうしたらいいのか、教えていただきたいです。
- ベストアンサー
- PHP
- エクセルのIF関数の真、偽の値の設定について
エクセルのIF関数の真、偽の設定値を、HTMLタグにしたいと思っておりますが「正しくありません」という表示が出て先に進めません。 私がやりたい事は、A1セルに1を入力すると、B1セルに<img src="test.gif">が表示され、A1セルが未入力だと<img src="test2.gif">と表示されるようにしたいのですが、どうにも上手くいきません。 どなたか良い方法をご存知の方がいましたらお助けください。 現状B1セルには下記の内容で設定してますが、エラーになっております。 =IF(A1=1,<img src="test.gif">,<img src="test2.gif">) 以上よろしくお願い申し上げます。
- ベストアンサー
- オフィス系ソフト
お礼
susie-tさん ご回答ありがとうございました。 大変助かりました。 キャサリン