ラブラブマウスの使い方

TOP | SITE MAP | 素材集


ラブラブマウスの使い方
　
もともとこのスクリプトはJavaCさんのものですがこちらでは解説がすくないので
もう少し詳しく説明します。

１．画像を用意します。
　　移動している時の画像、リンクに合わせた時の画像、ステイしている時（クリックした時）の画像の
　　３種類が使えます。最低でも移動している時の画像だけは用意しましょう。
　　気をつけるのは、３つとも大きさを揃える事です。
　　一番大きな画像にあわせて他の画像も余白をとりましょう。

２．以下の青字の部分をページのソースの然るべき場所に貼付けてください。
　
<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>
</BODY>
</HTML>
　

３．赤字の部分を書き換えます。
　
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"; //ステイしたときの画像。
それぞれ用意した画像のパスを書きます。
パスの事がよくわからない場合は画像をページと同じ階層に入れて
ファイル名をそのまま入れましょう。
　
width=60 height=60
画像の大きさの設定です。３種類の画像は全てこの大きさで表示されます。
　
pos = 15; //位置制御
この数字はポインタと画像との距離です。数字が大きいほどポインタから離れます。
特に書き換える必要はありません。

４．リンクに合わせた時の画像がある場合
　　リンクの部分にこのようなタグを書き込みます。
　　このタグがある部分にポインタを合わせると画像が変わるようになります。
　
<a href="http://www.yahoo.co.jp/" onMouseover="changeImage(1)" onMouseout="changeImage(0)">
yahoo</a>
　
　　リンクに合わせた時の画像がない場合は必要ありません。
　　設定は以上です。動作確認をしてみましょう。

TOP | SITE MAP | 素材集