はねるリンク

リンクの数が多いページには不向きです。<body onload="set_link_jump();">を忘れないように記述下さい。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
<!--
var l = document.getElementsByTagName("a").length;
var targetElement = Array(l);
var stop          = Array(l);
var posn          = Array(l);

//リンクにオンカーソル時の処理を付加
function set_link_jump(){
    var lnks = document.getElementsByTagName("a");
    if(lnks.length > 0){
        for(i=0; i<lnks.length; i++){
            lnks[i].style.position = "relative";
            lnks[i].onmouseover    = jump_set;
            lnks[i].id             = i;
            targetElement[i]       = lnks[i];
            targetElement[i].vl    = false;
        }
    }
}

function jump_set(evt){
    var ele;
    if(window.addEventListener) {
        ele = evt.target;
    }else{
        ele = event.srcElement;
    }
    if(targetElement[ele.id].vl == false){
        targetElement[ele.id].vl = true;
        posn[ele.id] = 0;
        stop[ele.id] = setInterval("jump("+ele.id+")",50);
    }
}

function jump(id){
    switch(posn[id]){
        case 0:
        case 4:
        case 7:{
                targetElement[id].style.top = "-2px";
        }
        break;
        case 1:
        case 3:{
                targetElement[id].style.top = "-3px";
        }
        break;
        case 2:{
                targetElement[id].style.top = "-4px";
        }
        break;
        case 5:
        case 9:
        case 11:{
                targetElement[id].style.top = "0px";
        }
        break;
        case 6:
        case 8:
        case 10:{
                targetElement[id].style.top = "-1px";
        }
        break;
        default:{
        }
    }

    if(posn[id] == 11){
        clearInterval(stop[id]);
        posn[id] = 0;
        targetElement[id].vl = false;
    }
    else{
        posn[id]++;
    }
}
//-->
</script>
</head>
<body onLoad="set_link_jump();">
<p><a href="https://www.7key.jp/hp/">ホームページ作成の第一歩</a>にカーソルをのせて下さい。</p>
<p><a href="https://www.7key.jp/hp/">ホームページ作成の第一歩</a>にカーソルをのせて下さい。</p>
</body>
</html>