人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

100p差し上げます。css+javascript(+DOM)についての質問です。html・css・javascriptを別々のファイルにして、マウスオーバーを作りたいと思っています。

私はまず最初にhttp://www.parkcity.ne.jp/~chaichan/src/javas210.htmのページにあるサンプルソースを使って、まずsample.htmlという名前のファイルを作りました。doctypeはxhtml1.0です。これはそのままコピペしたらうまくいきました。

次に、<head>要素内部の内のcssをsample.cssという名前で外部スタイルシートにしました。これも動作確認できてうまくいきました。

次に、<body>要素内部のjavascriptの部分についても同様にsample.jsという外部ファイルにしたいのですが、どうすればいいのかがわかりません。

●質問者: akymrk
●カテゴリ:ウェブ制作
✍キーワード:CSS DOM HTML JavaScript js
○ 状態 :終了
└ 回答数 : 7/7件

▽最新の回答へ

1 ● taoo
●10ポイント

http://www.openspc2.org/reibun/javascript/kihon/002/

外部JavaScriptファイルを読み込む

(1) まず、下記の部分を sample.js として保存します。

(---- は、いりません。)

-----------------

obj = document.getElementById(”test1”);

obj.onmouseover = func1; //onmouseoverのイベントハンドラをオーバーライド

obj.onclick = func2; //onclickのイベントハンドラをオーバーライド

obj.onmouseout = func3; //onmouseoutのイベントハンドラをオーバーライド


function func1(){ //オーバーライドするonmouseoverメソッド

this.className=”class1”;

}

function func2(){ //オーバーライドするonclickメソッド

this.className=”class2”;

}

function func3(){ //オーバーライドするonmouseoutメソッド

this.className=””;

}

-----------------

(2) HTML の JavaScript 部分を、下記のように記述し読み込みます。

</div>と</body>の間でいいでしょう。

(---- は、いりません。タグの<>は半角に戻してください。)

-----------------

<script src=”sample.js” type=”text/javascript”></script>

-----------------


どうでしょうか。

◎質問者からの返答

動作検証してますか?丸々コピペしただけですよね。これで大丈夫なら質問はしていないのですが。


2 ● ggg
●0ポイント

?xhtmlのbody内の記述を

<script type=”text/javascript”>から

</script>までを下記に差替えます。


<script language=”JavaScript” src=”sample.js”></script>


?xhtmlと同じ場所にsample.jsを作成し、

<script type=”text/javascript”>

<!--から

// -->

</script>の中に記述してあるソースを作成したsample.jsに貼り付けます。

以上で正常に動作すると思います。


3 ● taoo
●0ポイント

動作検証は当然、しましたよ。エラーが出るならば

どのようなエラーか書いて頂ければもう少し詳しく

お答えできるかと。


.html と .js が同一ディレクトリにあることを

明示するために、script src を下記のように

記述してもいいかもしれません。


<script src=./sample.js” type=”text/javascript”></script>

◎質問者からの返答

そうですか。おかしいですね。body要素の中にjavascriptのソースを消し忘れてませんか。body要素の中身はdiv要素1つだけになってますか。div要素の中身はp要素1つだけになってますか。

head部分のjsファイルへのリンクは大丈夫です。

htmlファイルの文法チェックもやってます。

私の印象ではjsファイルに関数を追加しないといけない気がするのですが(htmlファイルのどこにも、onmouseoverとか書かずにマウスオーバーするようにするのですから)

参考

http://s35.yousendit.com/d.aspx?id=1BKM2FN7T3KVF15EE6T3SVG8N...


4 ● dmx
●0ポイント

http://125.30.32.74/sample/sample.html

2度しか回答できないのですね。

taooです。別アカウントを取りました。

連続回答申し訳ありません。


1で書かせて頂いた通り、JavaScript の埋め込みタグはbody内に記述しないと動きませんよ。

他人のミスよりもご自分のミスを疑うのが、バグ解決の近道であると自分は考えます。

◎質問者からの返答

確かにbody要素の中に書くと書いてらっしゃいましたね。大変失礼しました。

ただし、body要素の中に<script>


5 ● cinZano
●0ポイント

http://www7a.biglobe.ne.jp/~sooth/java.html

このページのソースを見てください

先に回答されている方と変わらないと思いますが

動作しています。

◎質問者からの返答

わざわざ作っていただいてありがとうございます。しかしbody要素にscript要素を書き込まない、aleto.chのサイトのようなjsファイルへのリンクはhead要素のみの方法でお願いします。


1-5件表示/7件
4.前の5件|次5件6.
関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ