ロールオーバーで画像を切り替えるjavascriptのコードの意味が分かりません

実現したいこと

javascriptの勉強をしていますが全く意味が分かりません。
MM_preloadImages()とMM_swapImage() という関数は引数がないのに
onLoad="MM_preloadImages('images/bt_home_over.gif','images/bt_gaiyou_over.gif','images/bt_webdesign_over.gif','images/bt_faq_over.gif')">
などという風に引数が入っているのでしょうか？
どなたか教えてください。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>ウェブデザイン技能競技会公式サイト</title>
  <link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript">
// スワップ関数開始
    // スワップイメージを先読み再ロード
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_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;
}

// スワップイメージの座標取得
// findObj関数は、指定した名前のHTML要素を検索するための関数です。

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
//     JavaScriptで引数全てを取得する場合は『arguments』というオブジェクトを使用します。
// これは関数内で使用できるオブジェクトで、関数に渡された全ての引数を『arguments』で取得できます
  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>
<!-- 画像切り替え時にすぐ表示されるよう前もってonloadで画像をロードしています。 -->
<!-- <body onload="MM_preloadImages('画像の場所','画像の場所～'）> -->
<body onLoad="MM_preloadImages('images/bt_home_over.gif','images/bt_gaiyou_over.gif','images/bt_webdesign_over.gif','images/bt_faq_over.gif')">
<div id="wrap">
<header><img src="images/banner.gif" alt="ウェブデザイン技能競技会バナー" width="800" height="48" id="banner"></header>
<nav><a href="#"><img src="images/bt_home.gif" alt="HOME" width="200" height="42" id="home" onMouseOver="MM_swapImage('home','','images/bt_home_over.gif',1)" onMouseOut="MM_swapImgRestore()"></a><a href="#"><img src="images/bt_gaiyou.gif" alt="概要" width="200" height="42" id="gaiyou" onMouseOver="MM_swapImage('gaiyou','','images/bt_gaiyou_over.gif',1)" onMouseOut="MM_swapImgRestore()"></a><a href="#"><img src="images/bt_webdesign.gif" alt="ウェブデザイン技能競技会" width="200" height="42" id="webdesign" onMouseOver="MM_swapImage('webdesign','','images/bt_webdesign_over.gif',1)" onMouseOut="MM_swapImgRestore()"></a><a href="#"><img src="images/bt_faq.gif" alt="FAQ" width="200" height="42" id="faq" onMouseOver="MM_swapImage('faq','','images/bt_faq_over.gif',1)" onMouseOut="MM_swapImgRestore()"></a></nav>
<main></main>
<footer><a href="#">HOME</a> | <a href="#">概要</a> | <a href="#">ウェブデザイン技能競技会</a> | <a href="#">FAQ</a></footer>
</div>
</body>
</html>

試したこと

調べても細かな解説をしているサイトがありませんでした。

行動規範の内容に同意します

回答1件

ベストアンサー

14行目のargumentsです。

    var i,j=d.MM_p.length,a=MM_preloadImages.arguments;

argumentsオブジェクトを使うことで、関数の定義時に引数（仮引数）を設定していなくとも、
関数を実際に呼び出したときに指定された実引数にアクセスすることができます。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/arguments

arguments は配列風 (Array-like) オブジェクトであり、関数に渡された引数の値を含んでおり、関数内からアクセスすることができます。

投稿2023/10/16 13:08

退会済みユーザー

総合スコア0

loving

2023/10/16 13:45 編集

ありがとうございます。また、下記の関数の意味も分かりません。おおよそやりたいことはわかるのですが一つ一つが何をしているのかがわかりません。解説して頂けないでしょうか。助けてください。 function MM_preloadImages() { //v3.0 var d=document; //ドキュメントオブジェクトに画像があるとき if(d.images){ //d.MM_pという変数名の配列がないときにd.MM_pという変数名の配列を作るという意味だと思います 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) //↓なぜここでimageオブジェクトを生成しているのでしょうか？ { d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];} } } // スワップイメージを元の画像に戻す function MM_swapImgRestore() { //v3.0 ↓oSrcとありますが、soreがどこからきたのかなんなのかが分かりません。 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } ↓最後に返り値としてid名を返していること以外わかりません。 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 // JavaScriptで引数全てを取得する場合は『arguments』というオブジェクトを使用します。 // これは関数内で使用できるオブジェクトで、関数に渡された全ての引数を『arguments』で取得できます var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) // ↓この一行は何をしているのかわかりません。教えてください。 // x.srcがURLを表していることだけはわかります。 // if ((x=MM_findObj(a[i]))!=null)というのは、探している画像の座標が見つかった場合ということでしょうか。 if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} }

行動規範の内容に同意します