링크위에 아이콘이 뜹니다. happycgi

회원가입

출석체크

마이페이지

CGIMALL

jquery , CSS , PHP , Javascript , 무료폰트 , ASP

홈 > JAVASCRIPT > javascript 소스창고 > 텍스트효과 > 링크위에 아이콘이 뜹니다. 상세정보

클라우드태그

javascript

PHP

HTML

ASP

mysql

css

Mobile

jquery

image

slide

占쌨댐옙

占쏙옙占쏙옙占쏙옙트

메뉴

현재접속자 명

링크위에 아이콘이 뜹니다.

해피팀

네티즌

소스분류

텍스트효과

다운로드 횟수

816 회

간단설명

링크를 마우스로 롤오버시키면 링크위에 아이콘이 뜹니다. 이미지를 바꿔 사이트에 적용시킬수 있습니다.

평가하기

아래는 본 예제의 자바스크립트입니다.
아이콘지정 링크를 바꿔주시면 링크되어있는 이미지가 바뀌게 되며 이미지 위치조정을 하실수도 있습니다.

<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>