マウスアクション - JavaScript Market

JavaScript Market - 動きのあるホームページを作る為の各種JavaScript のサンプルと小技集を公開中

マウスアクション

←消す（ちょっとした応用編）

この部分にマウスを当てたりはずしたりクリックしたりして下さい。
■ このスクリプトのソース
<script>
function over(overmsg) {
   document.mousetestF.mousetest.value=overmsg;
}
function out(outmsg) {
   document.mousetestF.mousetest.value=outmsg;
}
function click(clickmsg) {
   document.mousetestF.mousetest.value=clickmsg;
}
function ouyou() {
   if(document.mousetestF.mousetest.value=="")
      alert('消す？\n\n消去する対象がありません。');
   else {
      alert('！警告\n\nテキストボックスの内容が消去されます\nキャンセルはできません。');
      document.mousetestF.mousetest.value="";
   }
}
</script>
<form name="mousetestF">
<input name="mousetest" size="40">
<a href="javascript:ouyou()" onMouseOver="ouyou()">←消す</a>（ちょっとした応用編）
</form>
<p>
<a href="javascript:click('リンクがクリックされました')"
 onMouseOut="out('マウスポインターが離れました')"
 onMouseOver="over('マウスポインターが当たりました')">この部分に</a>
マウスを当てたりはずしたりクリックしたりして下さい。
選択ボックス値の取得でも使っている画像を変換するスクリプトと併用すると…

←マウスポインタを当てたりはずしたりしてみて下さい
■ ソース
<script>
/* 画像のデータをキャッシュに読み込む */
btn0 = new Image();
btn0.src = "../image/btn0.jpg";
btn1 = new Image();
btn1.src = "../image/btn1.jpg";
</script>

<a href="xxx.html" onMouseover="document.btn.src=btn1.src" onMouseout="document.btn.src=btn0.src">
<img src="../image/btn0.jpg" name=btn width=50 height=20 border=0 align=absmiddle></a>
←マウスポインタを当てたりはずしたりしてみて下さい
こんなことや、
ページ１へ
 ページ２へ
 ページ３へ
 ページ４へ
 ページ５へ
■ ソース
<script>
/* 画像のデータをキャッシュに読み込む */
lmp0 = new Image();
lmp0.src = "../image/pos0.gif";
lmp1 = new Image();
lmp1.src = "../image/pos1.gif";
</script>

<img src="../image/pos0.gif" name=pos1 width=10 height=10 border=0 align=middle>
<a href="1.html" onMouseover="document.pos1.src=lmp1.src" onMouseout="document.pos1.src=lmp0.src">
ページ１へ
</a><br>

<img src="../image/pos0.gif" name=pos2 width=10 height=10 border=0 align=middle>
<a href="2.html" onMouseover="document.pos2.src=lmp1.src" onMouseout="document.pos2.src=lmp0.src">
ページ２へ
</a><br>

<img src="../image/pos0.gif" name=pos3 width=10 height=10 border=0 align=middle>
<a href="3.html" onMouseover="document.pos3.src=lmp1.src" onMouseout="document.pos3.src=lmp0.src">
ページ３へ
</a><br>

<img src="../image/pos0.gif" name=pos4 width=10 height=10 border=0 align=middle>
<a href="4.html" onMouseover="document.pos4.src=lmp1.src" onMouseout="document.pos4.src=lmp0.src">
ページ４へ
</a><br>

<img src="../image/pos0.gif" name=pos5 width=10 height=10 border=0 align=middle>
<a href="5.html" onMouseover="document.pos5.src=lmp1.src" onMouseout="document.pos5.src=lmp0.src">
ページ５へ
</a>
こんなこともできます。