はねるリンク
ホームページ作成の第一歩にカーソルをのせて下さい。
ホームページ作成の第一歩にカーソルをのせて下さい。
リンクの数が多いページには不向きです。<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>