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

質問

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

回答No.1

steel_gray · ベストアンサー

サンプルです。

<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を入れる。
コード中の </ は <\/ と表記する。

お礼

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

回答No.2

pick52

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でしかテストしていません。
非常に簡略化していますが実際にはもっとしっかり記述してください。

お礼

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