시작페이지로 즐겨찾기추가
로그인
회원가입 l 출석체크 l 마이페이지 l CGIMALL
happycgi
자료실 사이트등록 랭킹100 프로그램리뷰 관리자추천자료 초보가이드
커뮤니티
전체 펼쳐보기
퀵메뉴링크 jquery , CSS , PHP , Javascript , 무료폰트 , ASP
상세검색
 > JAVASCRIPT > javascript 소스창고 > 텍스트효과 > 링크위에 아이콘이 뜹니다. 상세정보
사이트등록
클라우드태그
javascript
PHP
ASP
css
html
mysql
jquery
image
API
mobile
메뉴
slide
게시판
현재접속자 97 새로고침
링크위에 아이콘이 뜹니다.
소스통계정보 오류신고 및 문의
해피팀
네티즌
트위터로 보내기 페이스북으로 보내기 네이버로공유
소스분류 텍스트효과
다운로드 횟수 817 회
간단설명 링크를 마우스로 롤오버시키면 링크위에 아이콘이 뜹니다. 이미지를 바꿔 사이트에 적용시킬수 있습니다.
평가하기 훌륭함 매우좋음 좋음 괜찮음 보통 별로
홈페이지바로가기 소스다운로드 데모 미리보기 스크랩하기

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

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


네티즌 의견   이용하신 자료의 후기를 자유롭게 작성하세요. (상업적인 광고 및 도배성 글 등은 사전통보없이 삭제될 수 있습니다.)
내용 아이디 의견남기기
등록된 의견이 없습니다.
1
이름
내용
:네맞아요: :화나는군요: :잠와: :우울해: :이건아냐: :왕하하: 왕웃음~ 놀램~
평가하기 훌륭함 매우좋음 좋음 괜찮음 보통 별로
도배방지키
 29286028 보이는 도배방지키를 입력하세요.