画像クリックでテキストエリアにソース表示

こんにちは。
色々調べてみましたが壁にぶつかってしまい、こちらで質問させて頂きます。
内容は、バナー画像が数種類ありその画像をクリックすると、
テキストエリアに設置タグを表示するという事がしたいです。
また、違うバナー画像をクリックすれば前回表示されていたタグは
消えて、新しいタグが表示するようにしたいです。（テキストエリアは同じ）
みなさまどうかご教授頂ければ幸いです。

No.1 ベストアンサー 回答者： steel_gray 回答日時： 2008/07/12 02:52

サンプルです。

<script type="text/javascript">
function sample(o){
var code = { //クリックしたimgのaltに対応したタグ
'バナー１':'<a href="～"><img ～><\/a>',
'バナー２':'<a href="～"><img ～><\/a>'
};
document.getElementById('TX1').value=code[o.alt];
}
</script>

<img src="バナー１のurl" alt="バナー１" onclick="sample(this)">
<img src="バナー２のurl" alt="バナー２" onclick="sample(this)">
<textarea id="TX1"></textarea>


注意
貼り付けるコードに改行を入れたければ\nを入れる。
コード中の </ は <\/ と表記する。

この回答へのお礼

さっそくの回答ありがとうございました！
正常に動きました。
とても助かりました、ありがとうございました。

お礼日時：2008/07/12 15:24

No.2 回答者： pick52 回答日時： 2008/07/12 04:50

JavaScriptの仕様でタグ(エレメント)名が大文字になってしまいますが

こんな方法はどうでしょうか。

<div id="test"><img src="バナー１のurl" alt="バナー１" onclick="document.form1.ta.value = document.getElementById('test').innerHTML"></div>
<form name="form1">
<textarea name="ta"></textarea>
</form>

IE 6.0でしかテストしていません。
非常に簡略化していますが実際にはもっとしっかり記述してください。

この回答へのお礼

ありがとうございます。
なるほど、そういうやり方もあるんですね・・・
とても勉強になりました。

お礼日時：2008/07/12 15:25