아래는 본 예제의 자바스크립트입니다. 아이콘지정 링크를 바꿔주시면 링크되어있는 이미지가 바뀌게 되며 이미지 위치조정을 하실수도 있습니다.
<html> <head> <title>해피CGI</title> <script type="text/javascript"> <!-- var bulletimg='<img id="bullet" style="position:absolute; left: -300px" src="http://www.blueb.co.kr/SRC/javascript/image1/flower01.gif">' //아이콘 지정 var bulletoffX=-35 //이미지 위치 조정 var bulletoffY=26 //이미지 위치 조정
function caloffset(what, offsettype){ var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop; var parentEl=what.offsetParent; while (parentEl!=null){ totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop; parentEl=parentEl.offsetParent; } return totaloffset; }
function displaybullet(linkobj){ bulletobj.style.left=caloffset(linkobj, "left")-bulletobj.width-bulletoffX+"px" bulletobj.style.top=caloffset(linkobj, "top")-bulletoffY+linkobj.offsetHeight/3+"px" bulletobj.style.visibility="visible" }
function modifylinks(){ bulletobj=document.all? document.all.bullet : document.getElementById("bullet") for (i=0; i<document.links.length; i++){ if (document.links[i].className=="ddbullet"){ document.links[i].onmouseover=function(){displaybullet(this)} document.links[i].onmouseout=function(){bulletobj.style.visibility="hidden"} } } }
if (document.all || document.getElementById) document.write(bulletimg)
if (window.addEventListener) window.addEventListener("load", modifylinks, false) else if (window.attachEvent) window.attachEvent("onload", modifylinks) else if (document.getElementById || document.all) window.onload=modifylinks //--> </script> </head>
<body> 링크 위에 마우스를 올려보세요.. <br><br> <a href="http://www.happycgi.com/" class="ddbullet">링크 1</a> <a href="http://www.happycgi.com/" class="ddbullet">링크 1</a> <a href="http://www.happycgi.com/" class="ddbullet">링크 1</a> <a href="http://www.happycgi.com/" class="ddbullet">링크 1</a> <a href="http://www.happycgi.com/" class="ddbullet">링크 1</a> <a href="http://www.happycgi.com/" class="ddbullet">링크 1</a> <a href="http://www.happycgi.com/" class="ddbullet">링크 1</a>
|