スワップイメージが上手く動作しません(泣)

解決済

質問者：haromaru
質問日時：2007/09/09 01:46
回答数：2件

JavaScript初心者です。
Dreamweaverを使用して、スワップイメージをしているのですが、
上手く動作してくれない場合があります。
いろいろ調べている内に、onloadが引っかかっているのでは？とも思ったのですが、原因がよくわかりません。

スワップイメージを使用しているページで、
body部分に【onload=MM_preloadImages】を入れると、
他のJavaScript部分が動作しなくなってしまうのです。
その為、body部分のonloadを外したら一部は問題なく動作したのですが、
その他スワップイメージの部分は、
onmouseoverをした際、スワップされた画像のまま戻らなくなってしまいます。

どうもonloadの部分がよくわからないのですが、
何故、MM_preloadImagesを書かなくても問題無く動作する場合があるのでしょう？
逆にどうしてMM_preloadImagesを書くとMM_swapImgRestoreが作動しない場合があるのでしょう？

ネットで検索したのですが、どうも上手く検索出来ず、
今から本を読んで一からJavaScriptを勉強する猶予も無いのです。
もちろん、時間が出来たらもっと勉強していくつもりです。

恥ずかしい質問なのかもしれませんが…。
どなたか解決策やヒント等を教えて頂けないでしょうか。
どうぞよろしくお願い致します。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： leap_day
回答日時：2007/09/09 08:04

こんにちは

Dreamweaverで作っているとしたら↓でしょうか？

<script language="JavaScript" type="text/JavaScript">

</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を入れたり削除してみましたが普通に切り替わりました・・・（？？）

この回答への補足

ありがとうございます。
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;

補足日時：2007/09/09 10:07

通報する

- 0
- 件

通報する

この回答へのお礼

文字制限で書ききれなかったのでお礼内容として追記しています。
OKWaveも初心者なもので申し訳ありません。

この上記のJavaScript部分がbodyにonLoad MM_preloadImagesを入れることで動作しなくなってしまうのです。
逆にonLoad MM_preloadImagesを外すと、スクロールさせる動作は動くのですが、
スワップイメージは最初だけで、onMouseOverの部分が動作しなくなって画像が切り替わったまま戻らなくなってしまいます。

IDもnameも不一致になってはいないと思うのですが…。
時間をかけて、あと一歩のところまできてつまづいています。
お力添えを頂けたら助かります。

通報する

お礼日時：2007/09/09 10:36

No.1

回答者： saaya_holic
回答日時：2007/09/09 07:29

参考URL参照。

MM_preloadImages は画像を読み込むときに生じる遅延をカバーするために先に画像を読み込む
MM_swapImgRestore は差し替えたイメージを元に戻す
body onload=～はその画像が表示されるべきページ(画像そのものではなく)が読み込まれたら右辺のスクリプトを実行する
というものですが、画像読み込みには時間がかかるので実際に実行されるのが記述された順番どおりにならないことがあります。

参考URL：http://blog.mag2.com/m/log/0000169311/107202581. …