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という外部ファイルにしたいのですが、どうすればいいのかがわかりません。

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:
  • 終了:--
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

回答7件)

id:taoo No.1

回答回数73ベストアンサー獲得回数4

ポイント10pt

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>

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


どうでしょうか。

id:akymrk

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

2006/03/08 16:18:38
id:loph No.2

回答回数29ベストアンサー獲得回数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に貼り付けます。

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

id:taoo No.3

回答回数73ベストアンサー獲得回数4

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

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

お答えできるかと。


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

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

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


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

id:akymrk

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

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

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

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

参考

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

2006/03/08 17:36:41
id:dmx No.4

回答回数17ベストアンサー獲得回数0

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

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

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


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

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

id:akymrk

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

ただし、body要素の中に<script>2006/03/08 18:33:13

id:cinZano No.5

回答回数189ベストアンサー獲得回数5

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

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

動作しています。

id:akymrk

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

2006/03/08 20:57:10
id:Mars No.6

回答回数203ベストアンサー獲得回数20

ポイント100pt

外部JSだけで実現するにはそれなりに汎用性のあるスクリプトに書き換える必要があります。

参考URL1は提示のサンプルとは別のものですがおおむねご希望のことができていると思われる例です。

(ページ右上の「ログ検索」のボタンなんかがマウスオーバでクラス名書き換えによりスタイルが変わります。)


Javascriptのサンプルというわけではないので補足してみます。


前提 :hover は最近のブラウザの中ではIEだけが<a>にしか使えないのでIEでだけ動くようにし、他のブラウザではCSSだけで実現する。

(IE7では他と同様CSSだけでできるようになっているといいのですが。余談でした。)


参考URL2 外部javascript

これはHTMLからリンクするだけです。


参考URL3の外部CSSより引用

.Button:hover,.ButtonHover {

background-color:#600;

color:#fff;

cursor:pointer;

}

前半の.Button:hoverがclass=”Button”に対するhover、IE以外のブラウザ向けのセレクタです。

後半はJavascriptで書き換えられるクラス。元のclassに’Hover’が付いたclass名になるようです。

(元が’Button’なのでマウスオーバーで’ButtonHover’に書き換えられる)


前後しましたが参考URL1の

<body onload=”allhover([’.Button’])”>

が、初期設定でButtonというクラスの要素があればマウスオーバーでクラスを変更するという設定です。


<div id=”AAA”>あああ</div>

<div class=”BBB”>いいい</div>

に、マウスオーバー効果を付ける手順例としてまとめると


<script type=”tex/javascript” src=”allhover.js”></script>を追加。


外部スタイルシートでは次のようにスタイルを設定

#AAA:hover,#AAA.Hover{

マウスオーバ時のスタイル

}

.BBB:hover,.BBBHover{

マウスオーバ時のスタイル

}


HTML部分のbodyで次のように初期化。

<body onload=”allhover([’#AAA’,’.BBB’])”>


<body>の変更も好ましくなければ

window.onload=allhover([’#AAA’,’.BBB’]);

この1行をallhover.jsの先頭行にでも追加すれば大丈夫です。


参考URLの管理人さんは一応知り合いで、こちらで紹介すること、第三者が流用することについては了承を得ています。

id:akymrk

丁寧な解説ありがとうございます。さっそく使ってみます。

2006/03/09 00:00:01
id:Mars No.7

回答回数203ベストアンサー獲得回数20

ポイント30pt

http://wws.cside.com/cgi-plant/js/allhover.html

CGI-PLANT Javascriptサンプル IEでアンカー以外にもhover効果

2回目です、小出しになってしまって申し訳ない。

製作者さんが用意途中だった解説ページを急遽アップしてくれましたので参考URLに挙げておきます。

id:akymrk

ありがとうございます。

2006/03/09 00:02:27

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません