Love Love Mouse
Comment: まぁ、お遊びと言うことで。
マウスをキャラクターが追いかけていきます。 クリックするとその場でstayします。またクリックすれば元通り。

(9/20)IE5で、スクロールした時画像の位置がずれる問題を修正。

画像ダウンロード： ０ / １ / ２
[ TOP ]
Script Source 
<HTML>
<HEAD>
<TITLE></TITLE>


<style type="text/css">
<!--
.mouse { position:absolute; visibility:visible; top:-100; left:-100;}
//-->
</style>


</HEAD>


<BODY>


<script language="JavaScript">
<!--

/*　画像の設定 src=の所に画像のパスを設定する */
 var mouse = new Array();
 mouse[0] = new Image();  mouse[0].src = "../_image/ham_0.gif"; //移動してるときの画像。
 mouse[1] = new Image();  mouse[1].src = "../_image/ham_1.gif"; //リンクにあわせた時の画像。
 mouse[2] = new Image();  mouse[2].src = "../_image/ham_2.gif"; //ステイしたときの画像。


function changeImage(n) {
  if(document.onmousemove != null) {
    if(document.layers) {
      document.layers[lovemouse_id].document.images[lovemouse_imgName].src = mouse[n].src;
    }
    else if(document.all) {
      document.images[lovemouse_imgName].src = mouse[n].src;
    }
  }
}


function moveImage(e) {
  pos = 15; //位置制御

  if(document.layers) {
    document.layers[lovemouse_id].moveTo(e.x+pos,  e.y+pos);
  }
  else if(document.all) {
    document.all(lovemouse_id).style.posTop = document.body.scrollTop + event.clientY + pos;
    document.all(lovemouse_id).style.posLeft= document.body.scrollLeft + event.clientX + pos;
  }
 return true;
}


function click() {
 if(document.layers) {
   obj = document.layers[lovemouse_id];
 }
 else if(document.all) {
   obj = window;
 }

 if(document.onmousemove == null) {
  obj.document.images[lovemouse_imgName].src = mouse[0].src;
  document.onmousemove = moveImage;
 }
 else {
  obj.document.images[lovemouse_imgName].src = mouse[2].src;
  document.onmousemove = null;
 }
}

 //------------------------------------//

 var lovemouse_id      = "LoveMouse";
 var lovemouse_imgName = "Mouse";

 document.write("<span id='" +lovemouse_id+ "' class='mouse'>");
 document.write("<img src='" +mouse[0].src+ "' width=60 height=60 id='" +lovemouse_imgName+ "' name='" +lovemouse_imgName+ "'>");
 document.write("</span>");

 if(document.layers)  { 
   document.captureEvents(Event.MOUSEMOVE | Event.MOUSEDOWN);
   document.onmousedown = click;
  }
 else if(document.all) {
   document.body.onclick= click;
  }

 document.onmousemove = moveImage;


//-->
</script>



<a href="http://www.yahoo.co.jp/" onMouseover="changeImage(1)" onMouseout="changeImage(0)">
yahoo
</a>


</BODY>
</HTML>
[ -Back- ]