URL링크에 미리보기 풍선이미지창 표시방법

Author : 금봉이 / Date : 2007. 8. 20. 11:57 / Category : 관심꺼리.log

아래 링크에 마우스를 올려보면 해당 사이트의 이미지가 풍선도움말로 나타난다.

그럼 어떻게 하는거냐?

우선 previewbubble.zip 파일을 다운로드 하고, 적당한 위치에 압축을 푼다.

이제 내 블로그에 적용시켜보자. 아래순서로 해주면 된다.

  1. bg.png 이미지 파일을 블로그에 업로드한다.
  2. previewbubble.js파일에 bubbleImagePath변수을 1번에 올린 위치로 설정해 준다.
    var bubbleImagePath = '/images/bg.png';
  3. blog skin파일의 header에 다음 스크립트를 추가한다.
    <script type="text/javascript" src="previewbubble.js"></script>
  4. 포스트를 작성할때 링크에 class="previewlink"를 추가한다.
    <a class="previewlink" href="http://www.naver.com">네이버</a>

앞으로 포스트 작성할때 링크를 넣을때, 미리보기 풍선도움말을 넣고 싶으면 4번작업만 해주면 된다.

TISTORY에서는 수정이 필요했다.
bubbleImagePath는 절대경로를 사용해 주어야 했고,  previewbubble.js파일을 약간 수정해 주어야 했다.

  • 원본
if(window.addEventListener){
lbActions[i].attachEvent("onmouseover",attachBubble);
lbActions[i].attachEvent("onmouseout",detachBubble);
}else{
lbActions[i].attachEvent("onmouseover",attachBubble);
lbActions[i].attachEvent("onmouseout",detachBubble);
}

  • 수정본
if(window.addEventListener){
/*lbActions[i].addEventListener("mouseover",attachBubble,false);
lbActions[i].addEventListener("mouseout",detachBubble,false);
*/    
lbActions[i].attachEvent("onmouseover",attachBubble);
lbActions[i].attachEvent("onmouseout",detachBubble);
}else{
lbActions[i].attachEvent("onmouseover",attachBubble);
lbActions[i].attachEvent("onmouseout",detachBubble);
} 

Tags : ,

Trackbacks 0 / Comments 0

Blog Information

금봉이

Calendar

«   2020/06   »
  1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30        
Copyright © 관심꺼리.log All Rights Reserved
Designed by CMSFactory.NET