Author : 금봉이 / Date : 2007.08.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);

공감

sns신고

오늘은 니콘포토스쿨 등록일~! (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

관심꺼리.log

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