Java Scriptを使ってHTMLのソースを再利用する方法とは？
- Java Scriptを使用してHTMLのソースコードを再利用する方法について困っています。
- HTMLのファイルでは、<script type='text/javascript' src='common/tes.js'></script>と記述してあり、Java Scriptのファイル'tes.js'では、特定の処理が原因で表示されなくなる問題があります。
- 具体的には、onMouseOut='MM_swapImgRestore()' onMouseOver='MM_swapImage('home','','common/img/menu_home_on.gif',1)'という処理が原因かもしれません。
- ベストアンサー
Java ScriptでHTMLのソースを使いまわす方法で、、、
こんにちわ。 Java ScriptでHTMLソースを使いまわす方法で困っています。 "tes.js"で使いまわしのHTMLを入力してます。 ロールオーバーの処理を記述する前は表示されるのに ロールオーバーの処理をいれると、表示されなくなりこまってます。 HTMLのファイルでは、呼び出す際 <script type="text/javascript" src="common/tes.js"></script>と記述してあり、 Java Scriptのファイル"tes.js"では、 document.write(" <a href='ndex.html'onMouseOut='MM_swapImgRestore()' onMouseOver='MM_swapImage('home','','common/img/menu_home_on.gif',1)'><img src='common/img/menu_home_off.gif' alt='home' name='home' width='42' height='9' border='0'></a>") と記述してあります。 もしかしたら、この処理↓に原因があるかもしれないとおもうんですが、 onMouseOut='MM_swapImgRestore()' onMouseOver='MM_swapImage('home','','common/img/menu_home_on.gif',1)' 誰かわかる方がいらっしゃれば教えていただけたらと思います。よろしくお願いします。
- ogoo
- お礼率97% (68/70)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
Wizard_Zeroと申します。 構文ミスです。 '～' の中に'～'で文字列を指定することは出来ません。 onMouseOver='MM_swapImage('home','','common/img/menu_home_on.gif',1)' ここを次のようにしてください。 onMouseOver='MM_swapImage(\"home\",\"\",\"common/img/menu_home_on.gif\",1)'
関連するQ&A
- javascritpの中身をHTML-lintでエラーが出ないようにしたい
英語のサイトで海外の方が作ったものを Another HTML-lint gateway http://openlab.jp/k16/htmllint/htmllinte.html でチェックしてエラーをできるだけなくしたいのですが、 私がJavascriptがさっぱりわからず、つまづいてしまいました。 ---------------------- <script language="JavaScript1.2">mmLoadMenus();</script> <a href="about.asp" onMouseOver="MM_showMenu(window.mm_menu_0119092132_0,0,23,null,'image2');MM_swapImage('image2','','images/menu_about2_selected.gif',1)" onMouseOut="MM_startTimeout();MM_swapImgRestore()"><img src="images/menu_about2.gif" name="image2" border="0" id="image2"></a><a href="basel.asp" onMouseOver="MM_swapImage('image1','','images/menu_basel2_selected.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="images/menu_basel2.gif" name="image1" border="0" id="image1"></a><a href="activitiesassist.asp" onMouseOver="MM_showMenu(window.mm_menu_0119090425_0,0,23,null,'image3');MM_swapImage('image3','','images/menu_assist2_selected.gif',1)" onMouseOut="MM_startTimeout();MM_swapImgRestore()"><img src="images/menu_assist2.gif" name="image3" border="0" id="image3"></a><a href="activitiesreport.asp" onMouseOver="MM_showMenu(window.mm_menu_0119090642_0,0,23,null,'image4');MM_swapImage('image4','','images/menu_report2_selected.gif',1)" onMouseOut="MM_startTimeout();MM_swapImgRestore()"><img src="images/menu_report2.gif" name="image4" border="0" id="image4"></a><a href="specificinfo_main.asp" onMouseOver="MM_showMenu(window.mm_menu_0119090857_0,0,23,null,'image5');MM_swapImage('image5','','images/menu_specific2_selected.gif',1)" onMouseOut="MM_startTimeout();;MM_swapImgRestore()"><img src="images/menu_specific2.gif" name="image5" border="0" id="image5"></a><a href="links.asp" onMouseOver="MM_swapImage('Image2','','images/menu_links2_selected.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="images/menu_links2.gif" name="Image2" border="0" id="Img1"></a> ---------------------- ・body内にscriptが書かれています。 ・alt属性の入れ方がわかりませんでした。 ・<script language="JavaScript1.2">は、 <script type="text/JavaScript1.2">で良いのでしょうか。 ・同じnameがあり(idも合っていない)変更しても問題ないでしょうか？ 初心者な質問かと思いますが、 回答いただければ幸いです。 よろしくお願いします。
- ベストアンサー
- JavaScript
- イベントハンドラを完全に外部化にしたい
イベントハンドラをなんとか、完全に外部ファイルにしたいと考えています。 <ul><li> <a href="a.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image1','','../ig/c1.gif',1)"> <img src="../ig1.gif" alt="aaa" name="Image1" id="Image1" /></a></li> <li> <a href="b.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','../ig/c2.gif',1)"> <img src="../ig2.gif" alt="bb" name="Image2" id="Image2" /></a></li> ・ ・ ・ </ul> サイトのナビ部分のソースです。この中にあるonmouseout、やonmouseoverを外部ファイルにして、 <ul><li> <a href="a.html"><img ～></li> <a href="b.html"><img ～></li>・ ・ ・ </ul>というすっきりした形にできないものでしょうか… イベント登録する関数を作って、ページのonloadで実行しておく という感じかな…と考えていたりするんですが… どのように記述すればよいか お知恵をお貸しください。 ※MM_swapImgRestoreやMM_swapImageはすでに外部化済です
- ベストアンサー
- JavaScript
- うまくリンク先に飛ばないです…
<a href="ch_01/info.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image7','','images/nav_overbtn03.gif',1)"><img src="images/nav_btn03.gif" name="Image7" width="175" height="25" border="0" id="Image7" /></a> こう記述していますが、リンク先に飛ばなくて困っています。 初歩的な質問かと思いますが、どう記述すればいいのでしょうか？ HTML Javaとも初心者なので分かりやすく教えてもらえたら嬉しいです。
- ベストアンサー
- ホームページ作成ソフト
- imgタグ内 name とｉｄの違い
こんにちは、DreamWeaver8を使ってホームページの勉強を始めたものです。 スワップイメージを作成していて、imgタグ内でname属性とid属性とがでました。スワップイメージの振る舞いには何の違いもないのですが、そもそも属性がnameとidとではどのように違うのかなと思いました。 何かお分かりの方がいましたら教えてください。 よろしくお願いします。 例）上側はname,下側はid <img src="button1.gif" name="Image1" width="150" height="29" id="Image1" onmouseover="MM_swapImage('Image1','','button1-2.gif',1)" onmouseout="MM_swapImgRestore()" /> <img src="button2.gif" width="150" height="29" id="Image2" onmouseover="MM_swapImage('Image2','','button2-2.gif',1)" onmouseout="MM_swapImgRestore()" />
- ベストアンサー
- ホームページ作成ソフト
- ウィンドウを閉じる
close.gifというファイル名の画像を押すとそのウィンドウが閉じる様にしたいのですが、現在スワップイメージでclose_s.gifというファイルを設定しています。 ドリームウィーバー４で作成しています。 下がそのスクリプトなのですが、ウィンドウを閉じさせるにはどこに何を記述したら良いのでしょう？ <a href="javascriptvoid(0)" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','img/close_s.gif',1)"><img src="img/close.gif" width="110" height="32" border="0" name="Image1"></a>
- ベストアンサー
- JavaScript
- ソースコードの説明とはどのようにすればいいのでしょうか？
はじめまして。 現在、Dreamweaverでサイト作成し、mouseoverのプログラムを記述していますが、Dreamweaverで自動で挿入したもののためよく理解しておりません。 以下のソースコードについて説明をしてくださいと言われたのですが、どのようにして説明すればいいのでしょうか？ <a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image28','','img/navon_01.gif',1)"><img src="img/nav_01.gif" alt="ホーム" name="Image28" width="93" height="50" border="0" id="Image28" /></a> どの部分がどういった内容か正直まったくわかっておりません。 javascriptについて理解している人間も不在のため、こちらで質問させていただきました。 どうかよろしくお願いいたします。
- ベストアンサー
- JavaScript
- <div>と<div>の隙間を無くす方法
ヘッダーの<div>を作って、その下に横長（ヘッダーと同じ長さです）ナビのメニューの<div>を作りたいのですが、ヘッダーの下とナビの上に20ｐｘほどの隙間が空いてしまいます。なぜでしょうか？マージンを0に設定してもできてしまいます。 また、ナビメニューはボタンの画像にして文字を埋め込んであります。全部で6つです。それをulで右にフロートさせ、liを左にフロートさせています。DWで作っていますが、DWのプレビュー画面で確認すると、メニューがulで右にフロートしてありますが、liが左にフロートされてなくブロック状態で表示されます。しかし、IEやfirefoxなどのブラウザで確認すると、ちゃんとインライン表示されます。それが原因しているのでしょうか？ また、メニューボタンはjavascriptでスワップイメージにしました。 どなたかわかる方いらっしゃいますか？ とても困っています。できましたら至急にお願いいたします。 コードを載せておきます。 <div id="header"> <div id="aa"> <h1>*********</h1> <h2>*********</h2> <p>**********<br /> *************</p> </div><!--aa--> <div id="bb"> <p>********</p> </div>><!--bb--> </div><!--header--> <!--navi--> <div id="navi"> <ul #menu> <li><a href="#" onmouseover="MM_swapImage('','','',1)" onmouseout="MM_swapImgRestore()"><img src="" name="" /></a></li> <li><a href="#" onmouseover="MM_swapImage('','','',1)" onmouseout="MM_swapImgRestore()"><img src="" name="" /></a></li> <li><a href="#" onmouseover="MM_swapImage('','','',1)" onmouseout="MM_swapImgRestore()"><img src="" name="" /></a></li> <li><a href="#" onmouseover="MM_swapImage('','','',1)" onmouseout="MM_swapImgRestore()"><img src="" name="" /></a></li> <li><a href="#" onmouseover="MM_swapImage('','','',1)" onmouseout="MM_swapImgRestore()"><img src="" name="" /></a></li> li><a href="#" onmouseover="MM_swapImage('','','',1)" onmouseout="MM_swapImgRestore()"><img src="" name="" /></a></li> </ul> </div> <!--navi--> ヘッダー部分のcss #header{ width: 800px; height: 120px; background-image: ***; background-repeat: repeat-y; margin: 0px; } ナビ部分のcss #navi{ width: 800px; height: 35px; } } ul#menu{ float: right; display: inline; margin: 0; } li{ float: left; margin: 0;
- ベストアンサー
- CSS
- htmlファイルによって正常にロールオーバーするページとしないページがあるのですが、どこが間違っているのでしょう？
お世話になります。 すべてのページに共通のボタンを設置してロールオーバーさせたいのですが、なぜかhtmlファイルによってきちんとロールオーバーするページとしないページがあります。初心者なので知らない内にソースをいじってしまったのかもしれませんが、このソースのどこが間違っているか教えていただけないでしょうか？初心者なものでホントに分からないです。ホントに困っています、どうかよろしくお願いします。ちなみにDreamweaverMXを使用しています。 ■正常に働くhtml <body onLoad="MM_preloadImages('images/home02.jpg','images/news02.jpg','images/company02.jpg')"> 中略 <a href="index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','images/home02.jpg',1)"><img src="images/home01.jpg" alt="home" name="Image1" width="134" height="53" border="0"></a> <a href="news.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image2','','images/news02.jpg',1)"><img src="images/news01.jpg" alt="新着情報" name="Image2" width="134" height="53" border="0"></a> <a href="company.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image3','','images/company02.jpg',1)"><img src="images/company01.jpg" alt="会社概要" name="Image3" width="133" height="53" border="0"></a> ■正常に働かないhtml <body onLoad="MM_preloadImages('images/home02.jpg','images/news02.jpg','images/company02.jpg')"> 中略 <a href="index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','images/home02.jpg',1)"><img src="images/home01.jpg" alt="home" name="Image1" width="134" height="53" border="0"></a> <a href="news.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image2','','images/news02.jpg',1)"><img src="images/news01.jpg" alt="新着情報" name="Image2" width="134" height="53" border="0"></a> <a href="company.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image3','','images/company02.jpg',1)"><img src="images/company01.jpg" alt="会社概要" name="Image3" width="133" height="53" border="0"></a>
- ベストアンサー
- HTML
- 簡単なJavaScriptなんですが
セル内にボタン（menu01.gif)があって、マウスオーバーしたら別の画像(menu02.gif)に変わり、クリックたら別のファイルに飛ぶ、というJavaScriptを教えてください。 Dreamweaver３で作ったら、OnClickの設定ができずマウスオーバーしただけでURLに飛んでしまうのですがどう直していいのか分からないのでよろしくお願いします。 <td> <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image10','','img/menu02.gif',1);MM_goToURL('parent','index.html');return document.MM_returnValue"> <img src="img/menu01.gif" width="167" height="20" border="0" name="Image10"> </a> </td>
- ベストアンサー
- JavaScript
- ボタンをMouseOverで、ボタン画像と指定先画像を同時に変えたい
どちらか片方ならできるのですが、本当に同時にできるのかも分かりません。 スクリプトの記述が違うのだと思うのですが。 他の方法でも構いません、ご教授お願いします。 指定画像（name:a1）にmain01.jpgを表示させるスクリプト <script Language="JavaScript"> <!-- if(document.images){ b2 = new Image(); b2.src="main01.jpg"; } else{ b2 = "" document.a1 = "" } //--> </script> <script language="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; } ～中略～ ここはDreamweaverで作られたスクリプトなので間違いないと思います。 ボタンのロールオーバーイメージのスクリプトです。 //--> </script> HTML記述 <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('menu00','','menu01.gif',1) document.a1.src='main01.jpg'"><img name="menu00" border="0" src="menu00.gif" width="173" height="32"></a>
- ベストアンサー
- JavaScript
お礼
ありがとうございます。 お礼おくれてごめんなさい。 ようやくできました。 あまりなれていないのと、ややこしさもあり、修正するのに時間がかかりました。 しかし、ジャバスクリプトを呼び出す構文を <script language="JavaScript" src="common/te.js"></script> <script language="JavaScript" src="common/te.js"></script> 上記のように2回繰り返して使うと動作しなくなってしまいます。 もし宜しければ、教えていただければ幸いです。 宜しくお願いします。