ベストアンサー

初心者なのにJAVAスクリプトを使うから！

2004/07/29 00:44

HP作成初心者で、特にJAVAスクリプトに関しては赤子にも及びませんが助言して頂けたら幸いです。まずいくつかの画像を、全部暗い感じにしてオンマウスでスポットライトがあたったように明るくなるような（フェードインする感じです）JAVAスクリプトを使いました。そして同じ画像ににオンマウスで任意のテキストを表示させるJAVAスクリプトを使いたいのですが、やり方がよくわかりません… 個々には出来るのですが…(当たり前ですが；）そもそもHEAD間に２つJAVAスクリプトを書いていいかもよくわかっていませんし、 BODY間のその2種類のJAVAスクリプトを呼び出したい場所での書き方もよくわかりません。自分なりに色々と調べてはみたのですが、答えが見つかりませんでした… 本当に初心者丸出しで、質問の意味もわかりにくいかとは思いますが、わかる方がいらっしゃいましたら是非教えて下さいませ<(_ _)>

latin82
お礼率72% (13/18)

JavaScript
回答数6
ありがとう数4

みんなの回答 （6）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

peron
ベストアンサー率45% (43/95)

2004/07/29 13:26 回答No.4

１）文字コードをとりあえず <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> にして下さいEUC-JPでは動きませんでした２）スクリプトの途中の //--> を削除 var msg= new Array(); msg[0]="任意のテキスト１"; の前の行３）<body bgcolor="#000000" text="#FFFFFF" link="#FFFFFF" vlink="#FFFFFF" alink="#FFFFFF"> <p><font color="#FFFFFF" size="2"><strong>どこが間違っているのでしょうか…</strong></p> までを削除 ※　<BODY>が２つあります４）<div id="mesTxt"> </div> の部分を <DIV id="mesTxt" style="position: absolute; top: 300px; left: 30px;"> </DIV> に変更する ※　画像の下に文字が表示されてしまう為　レイヤーの位置を指定してやる top: 300px; left: 30px; の300,30の部分を変更して目的の場所にして下さいこれでいかがでしょうかとりあえず前作をメモ帳へコピペし、画像の指定と文字コードの指定をしてやってみてくださいＩＥ６で動作確認しています（フィルターとＤＯＭの解るブラウザな為）何かありましたらご遠慮なくどうぞ

質問者

お礼 2004/07/29 15:00

この度は親切丁寧に教えて頂きまして本当にありがとうございました。これからは自分でも勉強して、質問に答えられる側に立てるように精進していこうと思います。また調べてもわからず、打ちひしがれている自分を見つけたなら、そっと手を差し伸べて頂けると幸いです。スーパーマンのようなperonさん、本当にどうもありがとうございました。それでは失礼します。

質問者

補足 2004/07/29 14:03

今まで自分でも色々試してやっていて、何度やってもランタイムエラーが出てきてしまっていました… そしてperonさんの言った通りに書き換えたってどうせ… なんて失礼にも思っていたのですがスパっと完璧に出来ちゃいました！有料かと思ってしまうほどの素敵なアドバイスを本当にありがとうございました！！それと、ついでと言ってはなんなのですが var msg= new Array(); msg[0]="任意のテキスト"; msg[1]="任意のテキスト"; ここの、任意のテキストの部分はフォントやら大きさやらカラーやらは変えられるのでしょうか？自分で色々試してはいるのですが…変えられませんです。

その他の回答 (5)

togino
ベストアンサー率75% (97/129)

2004/07/29 14:42 回答No.6

> document.getElementById("mesTxt").innerHTML=msg[i]; とありますので > msg[0]="任意のテキスト"; を msg[0]="<font color='red'>任意のテキスト</font>"; とすれば、赤色になると思いますよ。

質問者

お礼 2004/07/29 14:54

今回、またまたど初心者ぶりをいかんなく発揮してしまいましたが、教えて頂いたサイトを血眼になって読んで勉強しようと思います。初心者の自分にとっては全てのアドバイスが今後の為になりました。この度は本当にありがとうございました。調べてもわからず、また打ちひしがれている自分を見つけたなら、また助け舟を出して頂けると幸いです。それでは、失礼します。

togino
ベストアンサー率75% (97/129)

2004/07/29 13:51 回答No.5

ANo1 で補足要求した togino です。もう peron さんが的確な回答をして頂いているのでそれで十分だと思いますが、少し latin82 さんが苦しまれているようですので、アドバイスを。 HP 作成初心者には、ちょっと高度なスクリプトをご利用のようです。大変なのは当然ですので、お気になさらないよう、お願いします。これらのプログラムは JavaScript の域を超えて DynamicHTML と呼ばれる技術に入りかけております。 DynamicHTML とは、HTML をブラウザの上で、動的に自由自在に操作して、動きのある Web ページを作る技術の総称です。これを実現する為に、JavaScript やスタイルシート DOM (Document Object Model: 文書構造制御モデル) などが用いられます。なので、初心者にはかなり難しいと思いますのでまずは http://tohoho.wakusei.ne.jp/js/index.htm ここを読んでから http://tohoho.wakusei.ne.jp/www.htm にて「ホームページ入門」「ダイナミックHTML」などをゆっくり読まれると、プログラムの意味が分かると思います。難しいですが、逆に理解されますと、びっくりするような HP を作ることも可能になり楽しいものですよ。がんばってください (^^)

参考URL：: http://tohoho.wakusei.ne.jp/js/index.htm

peron
ベストアンサー率45% (43/95)

2004/07/29 09:35 回答No.3

＃２　追加情報　書き忘れですテキストエリアに表記出来ないのは、 document.getElementById("mesTxt").innerHTML の("mesTxt")はレイヤーを指していますので、 <div id="mesTxt"> </div> の空白のレイヤーにしか文字を表記出来ない為ですここに入る文字はinnerHTMLの中途半端な性格上　テキストと<BR>タグぐらいですリンクには使えません読み込んだ状態でテキストエリアを表示するのであれば、<FORM>以下を記入しても良いですが、画像にさわると　とたんにテキストになってしまいます

質問者

補足 2004/07/29 12:23

色々ご親切に教えて頂き本当にありがとうございます。しかし、言われた通りにやってみたつもりなのですがランタイムエラーになってしまいます。自分の書いたどこかの記述が間違っているようです…JAVAスクリプト以外の所が間違っているのかもしれないと思い、教えて頂いたJAVAスクリプトだけのページをメモ帳で作りましたがやはりランタイムエラー（∵がありません）が起きました。自分ではどこが間違っているか検討もつきません… どこが間違っているかわかるようでしたら、是非教えて下さい。 <html> <HEAD> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=EUC-JP"> <title>間違い探し</title> <STYLE type="text/css">  </STYLE> <SCRIPT type="text/javascript">  var msg= new Array(); msg[0]="任意のテキスト１"; msg[1]="任意のテキスト２"; function msgOn(i){ if (document.getElementById){ document.getElementById("mesTxt").innerHTML=msg[i]; } else { document.f1.msgtxt.value=msg[i]; } } function erase(){ if (document.getElementById){ document.getElementById("mesTxt").innerHTML=""; } else { document.f1.msgtxt.value=""; } } window.onload=erase; //--> </SCRIPT> </HEAD> <body bgcolor="#000000" text="#FFFFFF" link="#FFFFFF" vlink="#FFFFFF" alink="#FFFFFF"> <p><font color="#FFFFFF" size="2"><strong>どこが間違っているのでしょうか…</strong></p> <body onLoad="setInterval('RM()',10)"> <img src="画像URL" width="190" height="190" id="rm1" style="filter:alpha(opacity=30);" onMouseover="msgOn(0),setFade(this.id,5)" onMouseout="erase(),setFade(this.id,-5)"> <img src="画像URL" width="190" height="190" id="rm2" style="filter:alpha(opacity=30);" onMouseover="msgOn(1),setFade(this.id,5)" onMouseout="erase(),setFade(this.id,-5)"> <div id="mesTxt"> </div> AAA </body> </html>

peron
ベストアンサー率45% (43/95)

2004/07/29 09:22 回答No.2

このままだとレイヤー上のテキストエリアには何も記入されませんので、テキストエリアを省略します <HEAD> <SCRIPT type="text/javascript">  </SCRIPT> </HEAD> <body onLoad="setInterval('RM()',10)"> <img src="画像" width="190" height="190" id="rm1" style="filter:alpha(opacity=30);" onMouseover="msgOn(0),setFade(this.id,5)" onMouseout="erase(),setFade(this.id,-5)"> <img src="画像" width="190" height="190" id="rm2" style="filter:alpha(opacity=30);" onMouseover="msgOn(1),setFade(this.id,5)" onMouseout="erase(),setFade(this.id,-5)"> <div id="mesTxt"> </div> </body> これをコピペして、画像の部分に画像のＵＲＬを入れて試してみてください ※　<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> も<HEAD>に忘れずにタグの大文字、小文字がばらばらになっています　私はタグを大文字で書くため、申し訳ないですが変更してください（動作には支障がありません）

togino
ベストアンサー率75% (97/129)

2004/07/29 01:33 回答No.1

> そもそもHEAD間に２つJAVAスクリプトを > 書いていいかもよくわかっていませんし別にかまいませんよ <html><head> <script type="text/javascript">  </script> <script type="text/javascript">  </script> </head> まったくかまいません。しかし、２つの間で同じ関数名や変数名を使っている場合片方の名前を変えてあげたりする作業が必要になる場合もあります。 > BODY間のその2種類のJAVAスクリプトを > 呼び出したい場所での書き方例えば、フェードインする側で <img src="hogehoge.jpg" onMouseOver="FadeIn()"> テキストを表示する側で <img src="hogehoge.jpg" onMouseOver="DisplayText()"> となっている場合 <img src="hogehoge.jpg" onMouseOver="FadeIn();DisplayText()"> のようにまとめることが可能です。しかし、お互いが干渉しあうことがあるので、その場合どちらかのプログラムを少し修正する必要があるかもしれません。あとは、具体的にそのプログラムを見せて頂けますか？スクリプトの内容によって、簡単に出来たり出来なかったりするものですから。

質問者

補足 2004/07/29 01:40

おぉこんなに早くに的確なご解答をして頂き、本当にありがとうございます。以下がプログラムです。１）オンマウスで透過していた画像が戻るJAVAスクリプトヘッダー <script language="JavaScript">  </script> ボディー <body onLoad="setInterval('RM()',10)"> <img src="画像参照先" width="190" height="190" id="rm1" style="filter:alpha(opacity=30);" onMouseover="setFade(this.id,5)" onMouseout="setFade(this.id,-5)"> <img src="画像参照先" width="190" height="190" id="rm2" style="filter:alpha(opacity=30);" onMouseover="setFade(this.id,5)" onMouseout="setFade(this.id,-5)"> </body> ２）オンマウスで任意のテキストを出すJAVAスクリプトヘッダー <script type="text/javascript"></script> ボディー <body> <a href="#" onClick="return false;" onMouseover="msgOn(0)" onMouseout="erase()"><img src="画像参照先 "width="190" height="190" alt="画像0"></a> <a href="#" onClick="return false;" onMouseover="msgOn(1)" onMouseout="erase()"><img src="画像参照先" width="190" height="190" alt="画像1"></a> <div id="mesTxt"> <form name="f1"> <textarea rows="5" size="40" name="msgtxt"></textarea> </form> </div> </body> 自分でJAVAスクリプトを調べている時にいつも関数、変数の所は飛ばしていました；今度からじっくり読んでみようと思います。

初心者なのにJAVAスクリプトを使うから！