ベストアンサー

マウスオーバーのやり方を教えてください。

2007/04/17 17:18

はじめまして。実はこのたび、ホームページを業者さんに制作していただきました。そして、今は素人ながら今後のことも考え自分たちで知識を身につけようと勉強中です。今回、業者に制作していただいたホームページのソースをそのままdreamweaverに貼り付けてみました。画像もちゃんと配置したのですが、なぜかホームページ内のマウスオーバーが機能しません。実際にサーバーにアップされているホームページはちゃんとマウスオーバーが機能しているのにです・・・一応、テキストブックを片手に頑張ってはいるのですが、どうも行き詰っています。以下が、そのソース内容となります。 ↓ 『<TD valign="bottom"><A href="../index.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('menu_home','','../img/home2.jpg',1)"><IMG src="../img/home.jpg" alt="HOME" name="menu_home" width="100" height="25" border="0"></A></TD>』以上、本当に初心者ですので、質問内容自体に不備があると思いますが、どうかマウスオーバーが機能しない原因を教えていただけないでしょうか？そのまま、ソースをdreamweaverにコピー、し画像を用意するだけではだめなのでしょうか？どうかよろしくお願いいたします。

noname#30718

HTML
回答数10
ありがとう数9

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

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

ベストアンサー

basil
ベストアンサー率35% (148/420)

2007/04/17 21:06 回答No.6

うーん、なるほど。。。ＪＳが不安定、ですか。ちなみに、ソースをコピペーして持ってくる際、 dreamweaverで開いたファイル間で移動しましたか？それとも、別のエディタなどで開いておいて、そこから写しましたか？文字コードなどの絡みでなにか変な文字になっちゃったとか、ないですかね。たとえばバックスラッシュとか。。

質問者

お礼 2007/04/17 21:24

basilさんありがとうございます。見たところ、文字などに違いは見られないようです・・・やはり、プロの方が作ったものは素人ではなかなかいじることも簡単ではないですね・・・

その他の回答 (9)

goldfox
ベストアンサー率49% (123/249)

2007/04/18 12:54 回答No.10

> 特にエラーなどは出てこなくて、なぜかメモ帳から開くとレイアウトも変わって、さらにおかしくなってしまいます・メモ帳でも上手くいかないとなると、やはり何かが足りないのかもしれません。上手くいかないページのソースを1ページ丸ごと、こちらにコピーペーストしてみましょう。上手くいかない原因を誰かが検証してくれるかもしれません。

basil
ベストアンサー率35% (148/420)

2007/04/17 23:21 回答No.9

お力になれずに、残念です。もし問題が解決したら、原因をここに追記してもらえると今後このスレッドを見たひとのよいヒントになるかもしれません。ぜひよろしくお願いします。

質問者

お礼 2007/04/18 00:13

何度も本当にご丁寧な回答ありがとうございます。＞お力になれず、残念です。とんでもありません。なにしろまだまだ初心者中の初心者ですので、basilさんに教えていただいた内容、すべてが新鮮で役に立っております。ぜひともこちらで原因を追記させていただきます・・・きっと、ふたを開けてみるととんでもなくくだらない内容のような気がしていますが・・・（汗最後になりますが、本当に本当にありがとうございました。

basil
ベストアンサー率35% (148/420)

2007/04/17 22:46 回答No.8

実際のソースを見ていないので想像の中からあてずっぽうでアドバイスするしかないのですが、、、画像表示部分のソースで、「"」ダブルクオーテーションや「'」シングルクオーテーションそれに「()」半角括弧なんかの「開き」と「閉じ」はちゃんと対になっていますか？どこかでうっかり「閉じ」忘れていたりしませんか？再度よ～く確認してください。あるいは、ソースを「Another HTML-lint gateway」サービスなんかで文法チェックしてみるのも何かの手がかりになるかもしれません。 Another HTML-lint gateway http://htmllint.itc.keio.ac.jp/htmllint/htmllint.html

質問者

お礼 2007/04/17 23:04

本当に何度も何度も回答ありがとうございます。再度、確認してみましたがやはり元のソースとの違いは見当たりませんでした… 明日、一度制作していただいた方に直接尋ねてみることにします。。。おそらくこちらの問題だとは思いますが、なにか手がかりがあるかもしれないので・・・＞Another HTML-lint gateway これ、ものすごく便利そうですね！今後もこんな調子で必ず必要になってくるに違いないので、ぜひ活用させていただきます。本当に何度も何度もご丁寧な回答ありがとうございます。

goldfox
ベストアンサー率49% (123/249)

2007/04/17 22:06 回答No.7

dreamweaverを使わなければ、問題なく動きますか？例えば、問題のソースをまるごとメモ帳（notepad）にコピーし、test.htmlという名前で保存。 IEなどのブラウザで開いて、動くかどうか確認してみてください。また、ブラウザで動作確認中、左下に黄色い三角のエラーマークが出ているならば、それをクリックしエラーの内容をここに全文書き写しましょう。

質問者

お礼 2007/04/17 22:56

ありがとうございます。それをやってみてもうまくいきませんでした… 特にエラーなどは出てこなくて、なぜかメモ帳から開くとレイアウトも変わって、さらにおかしくなってしまいます・・・何か根本的な作業を見落としていると思うんですが。。。

basil
ベストアンサー率35% (148/420)

2007/04/17 19:38 回答No.5

DTDは大丈夫みたいですね。 JavaScriptがちゃんと動作しているか調べるために、 <script type="text/JavaScript">  </script> の「//-->」の前の行に alert("正常に動いています"); の１行を入れてみてください。ブラウザに表示した時に「正常に動いています」というアラートが出れば、その行以前のJSがちゃんと動作している証拠です。

質問者

お礼 2007/04/17 20:42

すみません！！先ほど、何度か同じ『alert("正常に動いています");』の挿入を試してみたところ、アラートが無事でてきました！！！正直、これはこれで、また原因がわからず振り出しのような気がしてますが・・・

質問者

補足 2007/04/17 20:30

ありがとうございます。。先ほど、ご指示いただいたとおり『alert("正常に動いています");』を挿入したところ、アラートらしきものは出てきませんでした。ということはこの行以前のJSが機能していないということですね・・・もう一度、しっかりと見直してみます。ありがとうございます。

basil
ベストアンサー率35% (148/420)

2007/04/17 18:57 回答No.4

私が過去にはまった、ちょっと以外？な落とし穴があります念のためにチェックしてみてください。ソースの１行目にDTD宣言てのがあります。たとえば <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> とか <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> みたいなやつです。これが適切じゃないと動作がおかしくなる場合があります。どんな宣言をしていますか？

質問者

補足 2007/04/17 19:21

何度も本当にありがとうございます。 DTD宣言らしき箇所は「<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">」となっております。どうかよろしくお願いいたします。

9white
ベストアンサー率40% (2/5)

2007/04/17 18:27 回答No.3

元のソース記述の <head></head>内に <script type="text/javascript" src="（ファイル名）.js"></script> のような文はありませんか？プロの方が作られたとの事でしたので、こういったスプリクトを整頓して構築されている可能性があります。（ファイル名）はわかりませんが、拡張子「.js」のものを探されると良いかもしれません。もしありましたら、srcで指定されているフォルダなりを形成して放り込めばいいものと思います。完成までがんばってください。

質問者

お礼 2007/04/17 19:27

回答、本当にありがとうございます。 <script type="text/JavaScript"> <!-- function～～のように外部ファイル？というのでしょうか？そのような記述は見当たりませんでした。。。 >完成までがんばってください。本当にありがとうございます。頑張ってみます。

basil
ベストアンサー率35% (148/420)

2007/04/17 17:55 回答No.2

もうひとつ確認：デフォルト表示の画像に加え、マウスオーバー時の画像もパスの指定先に置いてありますよね？まず、質問中のソース内に記述されている関数は・マウスアウト時の MM_swapImgRestore() ・マウスオーバー時の MM_swapImage() の２点ですこれらの関数定義がちゃんとできていて、加えて指定パス上に該当画像ファイルが正しく置かれていれば、一般的な閲覧環境ではちゃんと動作するはずです。一応、怪しそうなチェック項目も挙げておきます。１）aタグ内のMM_swapImage()関数内で指定しているオブジェクト名（上記例ではmenu_home）と続くimgタグに記述されているname属性値（上記例でこちらもmenu_home）とが同一か？２）条項のオブジェクト名は一意か？複数のオブジェクトに対して同一の名前を割り当てると、動作対象が定まらないためエラーとなり動作しません。menu_home, menu_outline, menu_products など、かぶらない名前を割り振りましょう。とりあえず、ここまで試してみてください。

質問者

お礼 2007/04/17 18:18

すべて確認、試してみましたが、どうも変わらずです・・・実は他にもおかしな？というかわからない問題が多々あるので、なんとかひとつひとつクリアしていければと思うのですが・・・どうか追加で考えられる原因がありましたらどうかよろしくお願いいたします。

質問者

補足 2007/04/17 18:18

dreamweaverを使い始めて間もないので、わからないことだらけで本当に申し訳ないのですが、実際に制作していただいたもののHTMLコードや写真素材をdreamweaverに貼り付けるだけでは同じものを作ることはできないのでしょうか？また、ソースをそのままコピーしてきましたが、なぜかjavascriptの部分が赤の波線がソース部分のしたに表示されます。これもなにか原因がありますでしょうか？どうかよろしくお願いいたします

basil
ベストアンサー率35% (148/420)

2007/04/17 17:30 回答No.1

まずご確認ですが、質問中のソースのタグ内でJavaScriptの関数をコールするようになっていますが、これに対応する関数定義部分もちゃんとコピペーできていますか？ソース内に書き込まれている場合と、連関ファイルとして外部に置かれている場合とがありますよ。

質問者

補足 2007/04/17 17:37

早速の回答ありがとうございます。はっきりと理解していないのですが以下のようなものもすべてそのままコピーしました。 <SCRIPT type="text/JavaScript"> <!-- function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } また、実際に作って頂いたもの以外でも勉強のため自分で練習用に作ったものも同様にマウスオーバーが動きませんでした・・・（汗なにか見落としているとは思うのですが、テキストを何度読み返してみても何が抜けているのか見つかりません。どうかよろしくお願いいたします。