フォームに入力された値により画像を変更

0   名前： キャサリン ： 2007/08/31（金） 23:46  ID:JxqjqTmr sub-t1
【質問概要】
フォームの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」部分は画像名に付加して処理するようにしたいのですが。

よろしくお願いします。

キャサリン















【何をしてみたのか】
→ これまでどんなことを試したのか、どんなことを調べてみたのか、などを記入してください。

【検索用語】
→ どのような検索用語で調べてみたのかを記入してください。

【備考】
→ その他、回答者の参考になるような情報があれば記入してください。
→ 特定のツールに関連がある場合は、その名称やバージョンを記入してください。
→ ★矢印の付いた行は削除して使用してください★
1   名前： 匿名 ： 2007/08/31（金） 23:46  ID:wXcx8O0N sub-Ds
質問というよりも、制作依頼の仕様書きでは？
そっくりウェブ屋に持っていくと結構な金額でやってくれますよ。


【質問時のご注意】http://www.tagindex.com/bbs/note.html#h201
質問にならないような「コードの作成依頼のみ」の投稿はご遠慮く
ださい。（どうしてもという場合には、事情を説明した上でお願い
してみてください）
2   名前： キャサリン ： 2007/08/31（金） 23:46  ID:JxqjqTmr sub-t1
匿名さん

ご意見ありがとうございました。実は、自分で作成中のコードがあるのですが、余りにコメントが長すぎてコメントを見られた方が質問の内容をつかみにくくなると思ったので載せなかったのです。 匿名さんのご意見もありましたので、作成中のコードを記載します。
このコードは、動作可能です。

「img」というフォルダーを作成して適当な画像を「test1.gif」、「test2.gif」、「test3.gif」という名前でそのフォルダの中に入れてください。
そして下記コードのHTMLページの入力欄に「img/test1.gif」、「img/test2.gif」、「img/test3.gif」などといれて画像変更ボタンを押してください。
そうすれば、画像が切り替わります。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無題ドキュメント</title>
<script language="javascript">
<!--
var file
function picture(file){
ab.src=file;
};
-->
</script>
</head>

<body>
<form name="form1">
<input type="text" name="text1"></input>
<input type="button" value="画像変更" onClick="picture(document.form1.text1.value)">
</form>
<img src="img/haru.gif" name="ab">
</body>
</html>

問題は、現在の状態では画像の名前（test1,test2又はtest3）以外にも「img/」などのパス名及び「.gif」などの拡張子を入力欄に画像名と一緒に入れなければならないのです。ここらあたりをどのようにすればよいのでしょうか？

キャサリン
3   名前： 元帥 ： 2007/08/31（金） 23:46  ［URL］  ID:UTCI27hA sub-bK
マルチポスト
http://otd8.jbbs.livedoor.jp/javascript/bbs_plain?base=17257&range=1

「はじめにお読みください」は読んでないのですか？
http://www.tagindex.com/bbs/note.html#h203
4   名前： キャサリン ： 2007/08/31（金） 23:46  ID:JxqjqTmr sub-t1
>問題は、現在の状態では画像の名前（test1,test2又はtest3）以外にも「img/」などのパス名及び「.gif」などの拡張子を入力欄に画像名と一緒に入れなけ>ればならないのです。

上記問題に関しては、解決しました。

下記コードでパスや拡張子を入れなくても、画像のファイル名だけ入力欄に入れれば画像が切り替わります。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無題ドキュメント</title>
<script language="javascript">
<!--
var file;
var file2;
function picture(file){
file2 = "img/" + file + ".gif";
ab.src=file2;
};
-->
</script>
</head>

<body>
<p>
このコードをテストするには、まずimgフォルダーを作成してその中に適当な画像をgif形式で複数保存してください。
<br>
入力欄に画像の名前を入力すると画像が切り替わります。
</p>
<form name="form1">
<input type="text" name="text1"></input>
<input type="button" value="画像変更" onClick="picture(document.form1.text1.value)">
</form>
<img src="img/haru.gif" name="ab">
</body>
</html>


残る問題は、どのようにして入力欄と画像が出力されるHTMLページを分割するかです。
以下のようにしたいのですが。

まず、a.htmlというHTMLページがあるとします。このページに「ページを開く」というボタンを作成するとします。そして、この「ページを開く」ボタンを押すとb.htmlとc.htmlというHTMLぺージが開きます。b.htmlには、画像のファイル名を入力する入力欄とjavascriptのアクションを誘発する「画像変更」というボタンがあります。c.htmlには、画像が出力されb.htmlの入力欄に入力された値により画像が切り替わります。

分からないのは、どのようにしてa.htmlにある一つのボタンで2つのページ（b.htmlとc.html）を同時に開くのかと、どのようにしてb.htmlとc.htmlを連動させるかです。

よろしくお願いします。

キャサリン



5   名前： 猫好き ： 2007/08/31（金） 23:46  ID:SUJ7QTqK sub-Ds
マルチポスト
http://oshiete1.goo.ne.jp/qa3295292.html

とってもと〜〜〜〜〜〜っても困ってる様子がうかがえますが、
いくらなんでもやりすぎですよ。
というか、他でいろいろ答えもらってるじゃないですか。

それに対するお返事は、なしですか？
6   名前： キャサリン ： 2007/08/31（金） 23:46  ID:JxqjqTmr sub-t1
猫好き さん


gooの掲示板で教えていただいた方には返事を出しました。

この質問は、解決しましたのでここで一旦終了させて頂きます。

キャサリン
7   名前： えじ ◆HtEaXt.II9 ： 2007/08/31（金） 23:46  ID:QQ2B.qfy sub-gw
>>6

既に終了されたようですが、今後のためにお願いしておきます。

当掲示板では、条件を満たさないマルチポストは禁止しております。
※条件につきましては、>>3 で提示されているリンク先に記載されています。
※その理由につきましては、下記のページに掲載しています。
　http://www.tagindex.com/bbs/qa11.html

このスレッドは現在、そのマルチポストの条件を満たしていません。
今回は事後報告で構いませんので、マルチポスト時の条件を満たしてください。
（最低限、どのように解決したのかをご報告ください。）

宜しくお願いいたします。
8   名前： キャサリン ： 2007/08/31（金） 23:46  ID:JxqjqTmr sub-t1
ここ以外に記載した場所に関しては、上記のスレッドでマルチポストとして記載されています。

解決方法は、猫好きさんのマルチポストに記載してあるURLでの回答を参考にしました。

ここ以外の場所に関してもこの質問が解決したことを記載しています。

キャサリン
9   名前： Z ◆XTzyosZXcL ： 2007/08/31（金） 23:46  ID:9zOB.njN sub-Cl
>>8
　それは、>>5で示されたマルチポスト先でsusie-tさんが示されたソースそのままで、ですか？それとも、さらに改造して実現したのですか？後者でしたら修正後のソースを示してください。

　特に、掲示板発言の場合、かならずしも発言が長期保存される訳ではありません。後でこのスレッドを見つけてマルチポスト先をさらに確認しようとしても、解決したはずのソースが消滅している可能性があります。

>>7でえじさんが示された掲示板Q&Aも熟読くださるようお願いいたします。
10   名前： えじ ◆HtEaXt.II9 ： 2007/08/31（金） 23:46  ID:QQ2B.qfy sub-gw
>>8

了解しました。努力していただいたことについては感謝いたします。

しかしながら、「マルチポストの条件を満たす」という行為は、ルールで定められているから仕方なく行なう、というものではなく、回答者やその他の閲覧者に対する配慮のために行なうものである、ということをご理解いただきたく思います。

もし、またマルチポストを行なうことがあるならば、その点を留意された上で投稿するようにしてください。

ご協力をお願いいたします。
一覧へ戻る