서윤이네 소식 
태터 팁스 2006/04/27 20:49
팬시툴팁을 설치해봅시다~
오른쪽의 스크린샷과 같이 마우스를 링크가 걸린 곳에 올리면 이쁘게 설명이 나오는거죠.
처음 보고 눈이 휘둥그래졌던 곳은 { D e e p B l u e } 입니다.
그리고 스크립트와 스타일시트를 만든 분은 Victr 이십니다.
실제 작동은 바로 위 링크부분에 마우스를 올려보시면 직접 보실 수 있겠네요.
욕심이 나십니까?
자, 그럼 간단하게나마 설치법을 설명해드릴께요.
일단 자바스크립트와 스타일시트 파일을 다운받습니다. 다운받기
다운 받은 파일의 압축을 해제합니다.
그 파일을 현재 사용 중인 skin.html 이 존재하는 디렉토리에 업로드합니다.
업로드할때 skin.html가 있는 디렉토리에 fancytooltips라는 폴더 속으로 fancytooltips.js와 fancytooltips.css 파일이 들어가도록 해야합니다.
다음의 코드를 skin.html 의 <head></head>사이에 넣습니다.<script language="javascript" type="text/javascript" src="./fancytooltips/fancytooltips.js"></script><link rel="stylesheet" href="./fancytooltips/fancytooltips.css" type="text/css" media="screen" />
사용법은 간단합니다.
각 링크에 title="
This is the content of the FancyTooltips" 과 같은 방법으로 설명을 달아주기만 하면 그 타이틀이 툴팁으로 보여지게 됩니다.사용 가능한 앵커는 <a>,<acronym>, <ins>, <del>이라고 하네요.
그리고 <img> 태그에는 alt="
This is the content of the FancyTooltips" 와 같은 방법으로 설명을 넣어주면 툴팁이 나타난다고 되어있는데 태터에서 삽입한 이미지에서는 잘 작동이 안되는 모양입니다. 수정방법은 모르겠구요. 
기본으로 설치하시면 회색의 툴팁이 나타나는데 수정을 원하시는 분들이 많으실 것 같네요.
툴팁의 색 수정에 대해 알려드릴께요.
fancytooltips.css 파일을 열어보시면
/* The FancyTooltip itself. */
div.fancytooltip {
background-color: #FFF0F6; ← 툴팁의 배경색을 지정합니다.
border: 1px solid #FFC7D7; ← 툴팁의 테두리색을 지정합니다.
color: #595959; ← 툴팁의 글자색을 지정합니다.
height: auto;
left: 0;
padding: 4px;
position: absolute;
top: 0;
width: 25em;
width: auto;
z-index: 20;
div.fancytooltip {
background-color: #FFF0F6; ← 툴팁의 배경색을 지정합니다.
border: 1px solid #FFC7D7; ← 툴팁의 테두리색을 지정합니다.
color: #595959; ← 툴팁의 글자색을 지정합니다.
height: auto;
left: 0;
padding: 4px;
position: absolute;
top: 0;
width: 25em;
width: auto;
z-index: 20;
위의 스타일색은 제 블로그에 사용된 핑크입니다.
자신의 블로그 스타일에 맞게 색을 수정해보세요.
보다 자세한 설명은 Victr의 fancytooltips 배포페이지에 가셔서 확인하세요 (영문입니다 )
모두들 성공하시길 바래요.
댓글
2006/04/28 11:56
정말 궁금했던 내용이었는데 감사드립니다.^^
얼른 설치해야겠네요~
2006/04/30 00:35
좋은 정보 감사합니다.
질문이있네요. 전 이상하게 안내 내용이 한참위에 나오네요 -_-;;
왜 일까요? LonnieNa님이 올려주신 플러그인도 함께 설치했는데..
혹시 아시면 좀 알려주세요 ^^;;
2006/04/30 01:36
플러그인폴더 안에 있는 fancytooltips.js파일을 에디터로 열어보시면요, 37번 38번째 줄에
if(!nMarginX){ nMarginX = 25; }
if(!nMarginY){ nMarginY = -40; }
와 같은 내용이 있습니다.
툴팁의 위치를 지정하는 소스이지요.
nMarginX는 마우스로부터 좌우로 떨어진 위치를 지정합니다. (+)값이면 마우스로부터 오른쪽으로, (-)값이면 왼쪽으로 나타나구요,
nMarginY는 마우스로부터 위아래로 떨어진 위치를 지정합니다. 마찬가지로 (+)값이면 아래로, (-)값이면 위로 가지요.
저는 nMargiY를 (-)값으로 지정해서 툴팁이 마우스로부터 조금 위쪽으로 나타내도록 수정했네요.
한번 확인해보세요. 그리고 원하시는 위치에 툴팁이 나타나도록 수정해보세요. ^^
도움이 되면 좋겠습니다.
2006/04/30 02:04
어이쿠 자세한 설명 감사합니다. 파이어폭스 문제였나봐요 ie에선 정상적으로 보이네요 ㅠ_ㅠ;;
2006/04/30 02:07
관리자만 볼 수 있는 댓글입니다.
2006/04/30 02:53
네 확인해보겠습니다.
아직은 문제가 없어서 안심하고 있지만 조심해야겠네요. @_@
2006/04/30 12:29
저도 이거와 비슷한 작품으로 일본의 ArekorePopup을 플러그인화 시켜서 사용하고 있습니다. 하지만 이게 라이트박스 갤러리와 어느 정도 충돌이 있더군요. [블로그 본문에선 아니지만 라이트박스로 띄워진 그림에서...]
이건 어떨까 모르겠군요'ㅂ' 잘 되면 갈아타야겠습니다.