オンマウスで跳ねるリンク

Java Scriptって何？

Java Scriptに初めて触れる方はまずこちらへ。

タグの絵本＞ Java Script ＞オンマウスで跳ねるリンク

■　オンマウスで跳ねるリンク

サンプル

	トップページ

	HTMLタグ

	作成支援ツール

プログラムソース＆解説

　　　　▽STEP1
　　　　

function e_jump(id){
if(point[id] == 17){
clearInterval(stop[id]);
point[id] = 0;
targetElement[id].vl = false;
}
else{
point[id]++;
}
switch(point[id]){

case 0:
break;
case 1:{targetElement[id].style.top = "-2px";}
break;
case 2:{targetElement[id].style.top = "-3px";}
break;
case 3:{targetElement[id].style.top = "-4px";}
break;
case 4:{targetElement[id].style.top = "-5px";}
break;
case 5:{targetElement[id].style.top = "-6px";}
break;
case 6:{targetElement[id].style.top = "-7px";}
break;
case 7:{targetElement[id].style.top = "-9px";}
break;
case 8:{targetElement[id].style.top = "-11px";}
break;
case 9:{targetElement[id].style.top = "-9px";}
break;
case 10:{targetElement[id].style.top = "-6px";}
break;
case 11:{targetElement[id].style.top = "-3px";}
break;
case 12:{targetElement[id].style.top = "-0px";}
break;
case 13:{targetElement[id].style.top = "-2px";}
break;
case 14:{targetElement[id].style.top = "-4px";}
break;
case 15:{targetElement[id].style.top = "-6px";}
break;
case 16:{targetElement[id].style.top = "-3px";}
break;
case 17:{targetElement[id].style.top = "-0px";}

break;
default:{
}
}

}
//-->
</script>

　　　　上記プログラムをHEAD内に書き込みます。
　　　　

　　　　-----------------------------------------------------------------------

　　　　▽STEP2
　　　　

　　　　<body>タグを<body onLoad="j_link();">という風に書き換えます。

使用例

ソース　（テスト書き込み可）

<html>
<head>
<script type="text/javascript">
<!--
var on = document.getElementsByTagName("a").length;
var targetElement = Array(on);
var stop = Array(on);
var point = Array(on);

function e_jump(id){
if(point[id] == 17){
clearInterval(stop[id]);
point[id] = 0;
targetElement[id].vl = false;
}
else{
point[id]++;
}
switch(point[id]){

break;
default:{
}
}

}
//-->
</script>
</head>
<body onLoad="j_link();">
<center>
<br><br><br>
<a href="./main.htm">トップページ</a>
<br><br><br>
<a href="./html_t.htm">HTMLタグ</a>
<br><br><br>
<a href="tool/tool_top.htm">作成支援ツール</a>
</center>
</body>
</html>

あなたのホームページ　Internet Explorer

ファイル(F)　編集(E)　表示(V)　お気に入り(A)　ツール(T)　ヘルプ(H)

ホームページ作成中。頑張ります！

トップページ

HTMLタグ

作成支援ツール

→index