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

解決済

質問者：kitty1000
質問日時：2007/08/28 22:21
回答数：1件

【質問概要】
フォームの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件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： susie-t
回答日時：2007/08/29 11:40

別ウィンドウはサブウィンドウ(自身が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>