URL링크에 미리보기 풍선이미지창 표시방법
Author : 금봉이 / Date : 2007. 8. 20. 11:57 / Category : 관심꺼리.log
아래 링크에 마우스를 올려보면 해당 사이트의 이미지가 풍선도움말로 나타난다.
그럼 어떻게 하는거냐?
우선 previewbubble.zip 파일을 다운로드 하고, 적당한 위치에 압축을 푼다.
이제 내 블로그에 적용시켜보자. 아래순서로 해주면 된다.
- bg.png 이미지 파일을 블로그에 업로드한다.
- previewbubble.js파일에 bubbleImagePath변수을 1번에 올린 위치로 설정해 준다.
var bubbleImagePath = '/images/bg.png';
- blog skin파일의 header에 다음 스크립트를 추가한다.
<script type="text/javascript" src="previewbubble.js"></script>
- 포스트를 작성할때 링크에 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);}
'관심꺼리.log' 카테고리의 다른 글
| 오늘은 니콘포토스쿨 등록일~! (0) | 2007.08.28 |
|---|---|
| 하나TV에서 공중파 HD방송 수신하기 (0) | 2007.08.27 |
| 우토로를 이토록 몰랐다니... (4) | 2007.08.24 |
| [초대완료] 나의 황당한 TISTORY 입성! & 티스토리 초대권 5장 드려요. (22) | 2007.08.23 |
| 니콘 드디어 풀프레임 DSLR바디 출시 (0) | 2007.08.23 |
| Windows Live Writer 이미지 포스트용 Plugin 사용법 (0) | 2007.08.22 |
| URL링크에 미리보기 풍선이미지창 표시방법 (0) | 2007.08.20 |
Tags : Windows Live Writer, 블로깅
Recent
Blog Information
금봉이