JavaScript サンプル：『ついてくる下線を作ってみる１』

説明

テキストエディタなどでもそうですが、現在選択されている行に下線が表示されていれば、文章が読みやすくなります。ブラウザでも大きな表などがあったばあい、現在どの列かを見やすくするために下線を表示させてみます。
資料などを読むときにサッシ（ものさし）を当てるような感じですね。

コード

var bwType = null;
var trgObj = null;
var mousePosY;

function moveObj() {
	var posY = mousePosY + 10;
	if ( bwType == 1 ) {
		trgObj.style.posTop = posY;
	} else if ( bwType == 2 ) {
		trgObj.style.top = posY;
	} else {
		trgObj.moveTo( trgObj.left, posY );
	}
}

function mouseMove(e) {
	if ( bwType == 1 ) {
		mousePosY = document.body.scrollTop + event.clientY;
		moveObj();
	} else {
		mousePosY = e.pageY;
		moveObj();
	}
}

function bwCheck(){
	if ( document.all ) {
		return (1);
	} else if ( document.getElementById ) {
		return (2);
	} else if ( document.layers ) {
		return (3);
	} else {
		return (null);
	}
}

function formLoad( id ){
	bwType = bwCheck();
	switch ( bwType ) {
		case 1:
			trgObj = document.all( id );
			break;
		case 2:
			trgObj = document.getElementById( id );
			break;
		case 3:
			trgObj = document.layers[ id ];
			document.captureEvents( Event.MOUSEMOVE );
			break;
		default:
			return;
	}
	document.onmousemove = mouseMove;
}

<BODY onLoad="formLoad( 'underline' )">
<SPAN id="underline" style="position:absolute;">
<HR size=1 width="100%" color="#ff0000">
</SPAN>

解説＆ステップアップ

マウスストーカーの応用技？です。
マウスに完全に重ねてしまうと、リンクなどをクリックできない場合があるので、少し下げておきます。
ちなみにNN(確認ver.4.7)は、<HR>のcolor属性に対応してませんが、IE(確認ver.5.5)の場合は赤い下線が表示されます。