HOME 　>>> 　HTML整理ノート 　>>> DHTML --　 基本編　　応用編

マウスと一緒に動くボール

ページ内をクリックすればボールの表示／非表示を切り替えれます。　

（補足)動かす画像はposition:absolutが設定されていること。

Sample Source......................................................................>>>

<body>
 <script language="JavaScript"><!--
 oldx = 0;  //直前のﾏｳｽx座標
 function MouseMo(){
   var posx,posy;        //ﾎﾞｰﾙを移動さすXY座標
   posx = event.x;    //現在のMouseのX座標を取得
   posy = event.y;    //現在のMouseのX座標を取得
   var bodyCW = document.body.clientWidth; 
         //現在のﾄﾞｷｭﾒﾝﾄｳｨﾝﾄﾞｳの横幅
   var bodyCH = document.body.clientHeight; 
         //現在のﾄﾞｷｭﾒﾝﾄｳｨﾝﾄﾞｳの縦幅
   var bodySCL = document.body.scrollLeft; 
         //現在のﾄﾞｷｭﾒﾝﾄｳｨﾝﾄﾞｳの左端X座標
   var bodySCT = document.body.scrollTop; 
         //現在のﾄﾞｷｭﾒﾝﾄｳｨﾝﾄﾞｳの上端Y座標
     //bodySCLとbodySCTは、ﾄﾞｷｭﾒﾝﾄｳｨﾝﾄﾞｳの上下左右ｽｸﾛｰﾙで変化する

  //以下は、ﾎﾞｰﾙがﾄﾞｷｭﾒﾝﾄｳｨﾝﾄﾞｳの左端、右端、上端、下端に達した時
   if(posx<0){posx = 0;}
   if(posx>bodyCW+bodySCL-pic.width){
     posx=bodyCW+bodySCL-pic.width;}
   if(posy<0){posy = 0;}
   if(posy>bodyCH+bodySCT-pic.height){
       posy=bodyCH+bodySCT-pic.height;}

  //ﾏｳｽの左右移動でﾎﾞｰﾙの位置を変える
   if(posx < oldx){    //ﾏｳｽが左移動時、ﾎﾞｰﾙはﾏｳｽの右に
     pic.style.left = posx;	//ﾎﾞｰﾙのX座標を設定
     pic.style.top = posy;  //ﾎﾞｰﾙのY座標を設定
   }else{    //ﾏｳｽが右移動時、ﾎﾞｰﾙはﾏｳｽの左に
     pic.style.left = posx - 28;	//ﾎﾞｰﾙのX座標を設定(ﾏｳｽ位置よりﾎﾞｰﾙ幅分左にｽﾞﾗす)
     pic.style.top = posy;  //ﾎﾞｰﾙのY座標を設定
   }		
   oldx = posx;  //直前のﾏｳｽx座標を記憶 
 }
 function PicDisplay(){    //ﾏｳｽｸﾘｯｸ時の処理
     if(pic.style.display=="none")pic.style.display = "";
     else pic.style.display = "none";
 }
 document.onmousemove = MouseMo;
     //ﾏｳｽが動かされた時、MouseMo()関数を呼び出す
 document.onclick = PicDisplay; 
     //ﾏｳｽがｸﾘｯｸされた時、PicDisplay()関数を呼び出す
   //--></script>
 <img id="pic" style="position:absolute;left:50;
     top:100;display:none"
     src="../../images/bt0709.gif" width="28"  height="28">

end(最終更新:12/11/12)