- ベストアンサー
スワップイメージが上手く動作しません(泣)
JavaScript初心者です。 Dreamweaverを使用して、スワップイメージをしているのですが、 上手く動作してくれない場合があります。 いろいろ調べている内に、onloadが引っかかっているのでは？とも思ったのですが、原因がよくわかりません。 スワップイメージを使用しているページで、 body部分に【onload=MM_preloadImages】を入れると、 他のJavaScript部分が動作しなくなってしまうのです。 その為、body部分のonloadを外したら一部は問題なく動作したのですが、 その他スワップイメージの部分は、 onmouseoverをした際、スワップされた画像のまま戻らなくなってしまいます。 どうもonloadの部分がよくわからないのですが、 何故、MM_preloadImagesを書かなくても問題無く動作する場合があるのでしょう？ 逆にどうしてMM_preloadImagesを書くとMM_swapImgRestoreが作動しない場合があるのでしょう？ ネットで検索したのですが、どうも上手く検索出来ず、 今から本を読んで一からJavaScriptを勉強する猶予も無いのです。 もちろん、時間が出来たらもっと勉強していくつもりです。 恥ずかしい質問なのかもしれませんが…。 どなたか解決策やヒント等を教えて頂けないでしょうか。 どうぞよろしくお願い致します。
- haromaru
- お礼率80% (4/5)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは Dreamweaverで作っているとしたら↓でしょうか？ <script language="JavaScript" 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; } function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } //--> </script> </head> <body onLoad="MM_preloadImages('sample2.gif','sample3.gif')"> <img src="sample0.gif" alt="画像1" name="Image1" width="100" height="100" border="0" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','sample2.gif',1)"> <img src="sample1.gif" alt="画像2" name="Image2" width="100" height="100" border="0" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image2','','sample3.gif',1)"> body onloadというのはHTMLの読み込みが終了したときにアクションを起こさせるものです preloadimagesというのは直訳どおり『画像の先読込』です 言うなればpreloadimagesによって倉庫から対象のものを表に出しておき必要に応じてそれを選択、交換できるようにするのです preloadimagesがない場合は倉庫から対象のものを探し出して交換します この探し出す手間をなくすのがpreloadimagesです ですのでpreloadimagesが無くても手間(タイムラグ)が少しかかるだけで問題なく機能するはずです 画像が戻らない方はonMouseoutが抜けているのではないですか？ もしくは onMouseOver="MM_swapImage('Image2','','sample3.gif',1)">の『Image2』の部分が画像のnameと不一致になっているとか？ ＞他のJavaScript部分が動作しなくなってしまうのです。 っていうのがちょっとよくわからないですけど上記のでonloadを入れたり削除してみましたが普通に切り替わりました・・・（？？）
その他の回答 (1)
- saaya_holic
- ベストアンサー率23% (46/195)
参考URL参照。 MM_preloadImages は画像を読み込むときに生じる遅延をカバーするために先に画像を読み込む MM_swapImgRestore は差し替えたイメージを元に戻す body onload=～ はその画像が表示されるべきページ(画像そのものではなく)が読み込まれたら右辺のスクリプトを実行する というものですが、画像読み込みには時間がかかるので実際に実行されるのが記述された順番どおりにならないことがあります。
お礼
ありがとうございます。 また少し理解出来ました。 参考ＵＲＬも今後の勉強の為に使用させて頂きます。
お礼
文字制限で書ききれなかったのでお礼内容として追記しています。 OKWaveも初心者なもので申し訳ありません。 この上記のJavaScript部分がbodyにonLoad MM_preloadImagesを入れることで動作しなくなってしまうのです。 逆にonLoad MM_preloadImagesを外すと、スクロールさせる動作は動くのですが、 スワップイメージは最初だけで、onMouseOverの部分が動作しなくなって画像が切り替わったまま戻らなくなってしまいます。 IDもnameも不一致になってはいないと思うのですが…。 時間をかけて、あと一歩のところまできてつまづいています。 お力添えを頂けたら助かります。
補足
ありがとうございます。 Dreamweaverは、まさに上記通りの仕様です。 MM_preloadImagesは読み込み時間を減らすだけのものなんですね。 すごくわかりやすい説明でした。 こちらは説明下手ですみません。 他のJavaScript部分というのは、複数の画像をスクロールさせる処理を行なっています。 長いですが載せますね。 var arrowImageHeight = 20; // Height of arrow image in pixels; var previewImage = false; var previewImageParent = false; var slideSpeed = 0; var previewImagePane = false; var slideEndMarker = false; var galleryContainer = false; function getTopPos(inputObj) { var returnValue = inputObj.offsetTop; while((inputObj = inputObj.offsetParent) != null)returnValue += inputObj.offsetTop; return returnValue; } function getLeftPos(inputObj) { var returnValue = inputObj.offsetLeft; while((inputObj = inputObj.offsetParent) != null)returnValue += inputObj.offsetLeft; return returnValue; } function showPreview(newSrc) { if(!previewImage){ var images = document.getElementById('previewPane').getElementsByTagName('IMG'); if(images.length>0){ previewImage = images[0]; }else{ previewImage = document.createElement('IMG'); document.getElementById('previewPane').appendChild(previewImage); } } previewImage.src = newSrc; } function initSlide(e) { if(document.all)e = event; if(this.src.indexOf('over')<0)this.src = this.src.replace('.gif','-over.gif'); slideSpeed = e.clientY + Math.max(document.body.scrollTop,document.documentElement.scrollTop) - getTopPos(this); if(this.src.indexOf('down')>=0){ slideSpeed = (slideSpeed)*-1; }else{ slideSpeed = arrowImageHeight - slideSpeed; } slideSpeed = Math.round(slideSpeed * 10 / arrowImageHeight); } function stopSlide() { slideSpeed = 0; this.src = this.src.replace('-over',''); } function slidePreviewPane() { if(slideSpeed!=0){ var topPos = previewImagePane.style.top.replace(/[^\-0-9]/g,'')/1; if(slideSpeed<0 && slideEndMarker.offsetTop<(previewImageParent.offsetHeight - topPos)){ slideSpeed=0; } topPos = topPos + slideSpeed; if(topPos>0)topPos=0; previewImagePane.style.top = topPos + 'px'; } setTimeout('slidePreviewPane()',30); } function revealThumbnail() { this.style.filter = 'alpha(opacity=100)'; this.style.opacity = 1; } function hideThumbnail() { this.style.filter = 'alpha(opacity=50)'; this.style.opacity = 0.5; } function initGalleryScript() { previewImageParent = document.getElementById('theImages'); previewImagePane = document.getElementById('theImages').getElementsByTagName('DIV')[0]; previewImagePane.style.top = '0px'; galleryContainer = document.getElementById('galleryContainer'); var images = previewImagePane.getElementsByTagName('IMG'); for(var no=0;no<images.length;no++){ images[no].onmouseover = revealThumbnail; images[no].onmouseout = hideThumbnail; } slideEndMarker = document.getElementById('slideEnd'); document.getElementById('arrow_up_image').onmousemove = initSlide; document.getElementById('arrow_up_image').onmouseout = stopSlide; document.getElementById('arrow_down_image').onmousemove = initSlide; document.getElementById('arrow_down_image').onmouseout = stopSlide; slidePreviewPane(); } window.onload = initGalleryScript;