java scriptについて

質問

ホームページビルダーでHPを製作してます。
画像をクリックするとテキストボックスに文字が入力されるjava scriptを教えてください。

リンクした別のページのテキストボックスに入力されるjavascriptが、尚いいのですが…

回答No.1

Randomize

リンク先のものを変更するのは難しいですが、同一ページ内のものを変更するのは意外と簡単に出来ます。

まずは下準備、下記のJavaScriptを配置してください。

function GetobjID(objName){
if(document.all){
return document.all(objName);
}
else if(document.getElementById){
return document.getElementById(objName);
}
else if(document.layers){
return document.layers[objName];
}
}

function ChangeText(objName,strText){
var objTarget=GetobjID(objName);
objTarget.innerText=strText;
}

2つのプロシージャを定義しています。外部ファイルに配置するかHEADタグ内に書くかはお任せします。
それが出来ましたら2段階目。内容を変更したいテキストボックスにIDタグを付けます
　　<INPUT size="20" type="text" name="textbox1" id="txtStatus">
この場合はtxtStatusというIDを付けたことになります。IDの名前は任意でいいですが、1つのページ内に重複するIDを定義してはいけません。その点は注意してください。
それが出来ましたら、仕上げです。
今回は画像をクリックしたらですので、該当するimgタグにonclickイベントを定義しましょう
　　onclick="ChangeText('表示を変更させたいテキストボックスのID','表示させたいテキスト文字');"
実際には
　　<img src="dummy.jpg" onclick="ChangeText('txtStatus','クリックされました');">
という感じにです。

ここまで出来ましたら実行してみましょう。特に設定を間違えていなければテキストボックスに指定した文字が表示されると思います。

・・・・・・だけですとこの問題は勿体無すぎるので、ちょっとこれの発展型を紹介しましょう。今回の質問とこの回答の内容は、この先動きのあるページを作成する際には必須になるテクニックです。

1.まずこの質問ではテキストボックスに文字を表示ですが、実はテキストボックス以外にも、表のセル内の文字(TDタグ内)や特定の段落や領域内(Pタグ・DIVタグ・SPANタグなど)の文字を動的に変更することが可能になります。

2.変化するタイミングはクリックだけではありません。「onDblClick」にすればダブルクリックした時になります。マウスが重なったらにしたければ「onMouseOver」「onMouseOut」をセットで使うといいでしょう。このサイトを参考にするといいでしょう
http://www.geocities.jp/abeshi_321/tec/dhtml/event.html

3.変更できるものは文字だけではありません。
function ChangeColor(objName,newValue){
var objTarget=GetobjID(objName);
objTarget.style.color=newValue;
}
なんてものを作ってしまえば、特定の物の中にある文字の色を変更できてしまいます。「.background-color=」に変えると背景色が変わります。何が変更できるのかはこのサイトを参考にするといいでしょう。
http://www.htmq.com/style/index.shtml

更に発展的に学びたい場合は、「HTML DOM」のあたりを検索してみるといいでしょう。今回のテクニックの種明かしになるでしょう。これも1つサイトを紹介しておきますね。
http://itpro.nikkeibp.co.jp/article/COLUMN/20070831/280881/

リンク先のページを加工するという点からは離れた回答になりましたが、同一ページではの回答であることあわせて、今後の発展の糧になれば幸いです。