- ベストアンサー
スワップイメージが上手く動作しません(泣)
saaya_holicの回答
- saaya_holic
- ベストアンサー率23% (46/195)
参考URL参照。 MM_preloadImages は画像を読み込むときに生じる遅延をカバーするために先に画像を読み込む MM_swapImgRestore は差し替えたイメージを元に戻す body onload=～ はその画像が表示されるべきページ(画像そのものではなく)が読み込まれたら右辺のスクリプトを実行する というものですが、画像読み込みには時間がかかるので実際に実行されるのが記述された順番どおりにならないことがあります。
関連するQ&A
- 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のロールオーバーで画像のプリロードを行いたいのですが、 <body onLoad=”MM_preloadImages(～～～というように、BODYの中に書く以外に、方法はありませんか？いろいろ検索してみましたがわかりませんでした。 「JavaScript」の書き方講座、のようなサイトではなく、すぐに使えるサンプルソースが載っているものが良いです。
- ベストアンサー
- JavaScript
- 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()" />
- ベストアンサー
- ホームページ作成ソフト
- Dreamweaverでimageのロールオーバー
Dreamweaverを使ってimageボタンのロールオーバーを指定すると <head>内に記述されるjavascriptのほか、<body>タグの中にも以下のタグが記述されます。 <body onLoad="MM_preloadImages('menu1_over.gif','menu2_over.gif')"> ()内のgif名はボタンがover時の画像名ですが、ロールオーバーするボタンが膨大だと <body>タグ内も膨大なソース量になってしまいます。 試しに削除してみたところIEでは正常にロールオーバーが動作します。 上記の記述は何を意味しているのでしょうか。 不足な情報があれば補足させていただきますので、お知恵をお貸し下さい。
- 締切済み
- ホームページ作成ソフト
- 外部参照の時のロールオーバーがわからない！
ちょっと長くなり失礼します。ドリームウェバーでロールオーバーを作ってみて、それを外部読み込みの形にしたくやってみやのですが、オンマウスの時に画像が変わりません。 どうかまちがいを教えてください。 ＨＴＭＬファイル <html> <head> <title>ためし</title> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <script type="text/javascript" src="b.js"> </script> </head> <body bgcolor="#FFFFFF" text="#000000" onLoad="MM_preloadImages('b.gif')"> <script type="text/javascript" src="a.js"> </script> </body> </html> ”ａ.ｊｓ”ファイル document.write("<a href='http://okweb.jp/' onMouseOut='MM_swapImgRestore()' onMouseOver='MM_swapImage('Image1','','b.gif',1)'><img name='Image1' border='0' src='a.gif'></a>");
- 締切済み
- JavaScript
- スワップイメージのフェード方法を教えてください
はじめまして。 スワップイメージを、あるサイトを参考に作ってみました。 それにフェードイン/フェードアウトを追加したいのですが、いろいろと試してみましたができません。 JavaScriptは全く分からず、困っています。 お助けください。お願いします。 ちなみに以下がスワップイメージのソースです。 image画面に表示する際、フェードイン/アウトを追加してもらえると助かります。 <HEAD> <script language="JavaScript"> <!-- Img = new Array() Img[0]="img/image1.jpg" Img[1]="img/image2.jpg" Img[2]="img/image3.jpg" AImgs = new Array() for (i=0 ; i<Img.length ; i++){ AImgs[i] = new Image() AImgs[i].src = Img[i] } function Swap(a,b){ a=a.name document.images[a].src = Img[b] } //--> </script> </HEAD> <BODY> <TABLE> <TR> <TD><IMG src="img/image1.jpg" name="image"></TD> </TR> <TR> <TD><A href="#" onmouseover="Swap(image,1)" onmouseout="Swap(image,0)"><img src="img/image2.jpg"></A></TD> <TD><A href="#" onmouseover="Swap(image,2)" onmouseout="Swap(image,0)"><img src="img/image3.jpg" ></A></TD> </TR> </TABLE> </BODY>
- ベストアンサー
- JavaScript
- onloadイベントで二つの操作をやりたいのですがどうすればいいでしょうか？
javascriptでファイルを読み込んだらイベントを発生させる"onload"イベントでわからないことがあります。 ↓以下のように一つのonloadイベントで二つの操作をしたいのですがどうすればよいでしょうか？ 分けて記述してしまうと作動しません。 かといって <body onload="MM_preloadImages('/images/global/menu_00_ro.gif'),load_my_rss">とするわけにもいきません。 \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ <script language="javascript"> function load_my_rss(){ get_rss("http://www.*******.jp/make_rss/rss1.rdf"); } window.onload = load_my_rss; </script> <body onload="MM_preloadImages('/images/global/menu_00_ro.gif')"> \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ どうすれば↓の二つの操作をほぼ同時に行えるでしょうか？ window.onload = load_my_rss; onload="MM_preloadImages どなたかよいアドバイスをお願いします。
- ベストアンサー
- JavaScript
- 角丸うまくいきません
Javascript初心者です。 自分のサイトでRico.jsというライブラリを使って角丸ボックスを作ろうとしましたが、できませんでした。 で、検証していくと、どうやらbodyタグのonloadに原因があるようでした。 <body onload="MM_preloadImages('img/8hoverfloormop.gif','img～～> 実際にonload以下を外したら角丸が作れたのですが、どういうことでしょうか？ この記述はどこにすればよいのでしょうか？ ご回答よろしくお願いします。
- ベストアンサー
- 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
- スワップイメージ画像入れ替え方法WIN/MACの動作違い
はじめましてこんばんわ。ホームページ製作初心者のものです。只今、ホームページを作成しており、javaのスワップイメージを記述したのですが、WINでは正常にイメージが切り替わるのですがMACで確認すると動作しておりません。すでにアップロードしてしまったのですが、、 以下の記述です。 <script language="JavaScript"> <!-- // タイマー変数の初期化 timer = ""; // スワップイメージ function SwapImage(img) { obj = document.getElementById("image"); obj.src = img; clearTimeout(timer); timer=setTimeout('DefaultImage()',5000); } // イメージ画像の初期化 function DefaultImage() { obj = document.getElementById("image"); obj.src = 'img'; clearTimeout(timer); } //--> </script> ------------------------------------------------------ 呼び出し方法です。↓ <td align="left" valign="top"><img src="○○○" onmouseover="SwapImage('○○○')" border="0"></td> ------------------------------------------------------ 某JAVA育成サイトにてコピペで記述したのですが、なぜMACでは 動作しないのでしょうか？ どなたかご存知の方、宜しくお願い申し上げます。
- 締切済み
- JavaScript
お礼
ありがとうございます。 また少し理解出来ました。 参考ＵＲＬも今後の勉強の為に使用させて頂きます。