[동적생성] 링크에 마우스 올라오면 링크 주소를 레이어로 보여주기

버튼을 클릭한 후 아래 링크에 마우스를 올려보세요.<br><br>
<a href="http://www.naver.com/" target="_blank">네이*</a><br>
<a href="http://www.daum.net/" target="_blank">다*</a><br>
<a href="http://www.empas.com/" target="_blank">엠파*</a><br>
<a href="http://www.paran.com/" target="_blank">파*</a><br>
<a href="http://www.chol.com/" target="_blank">천리*</a><br>
<a href="http://www.google.co.kr/" target="_blank">구*</a><br>

<input type="button" value=" 클릭 " onclick="makeLinkView()">

<div id="help_viewer" style="border:solid 1px black; font-weight:bold; padding:10; background-color:#FFFFBF; position:absolute; display:none; top:-100; left:-100;"></div>

<script language="JavaScript">
<!--
	function showLink(obj){
		var tmp = obj.href;
		document.getElementById('help_viewer').style.display = 'block';
		document.getElementById('help_viewer').innerHTML = tmp;
		document.getElementById('help_viewer').style.top = event.y + document.body.scrollTop + 40;
		document.getElementById('help_viewer').style.left = event.x - 50;
	}

	function hideLink(obj){
		var tmp = obj.href;
		document.getElementById('help_viewer').style.display = 'none';
		document.getElementById('help_viewer').innerHTML = '';
		document.getElementById('help_viewer').style.top = -100;
		document.getElementById('help_viewer').style.left = -100;
	}

	function makeLinkView(){

		// 현재 문서의 a 태그의 갯수를 파악
		var cnt = document.getElementsByTagName('a').length;

		// a 태그 수만큼 루프를 돈다
		// 루프를 돌면서 a 태그에 동적으로 마우스 오버, 아웃 스크립트를 만들어 줌
		for(var i=0 ; i<cnt ; i++){

			// 아래 스크립트의 결과는 <a onmouseover="showLink(this)" href="xxx" target="_blank">xxx</a> 와 같다
			document.getElementsByTagName('a')[i].setAttribute('onmouseover', function(){showLink(this)});

			// 아래 스크립트의 결과는 <a onmouseout="hideLink(this)" href="xxx" target="_blank">xxx</a> 와 같다
			document.getElementsByTagName('a')[i].setAttribute('onmouseout', function(){hideLink(this)});
		}
	}
//-->
</script>