웹을 돌아다니며 마주치는 수많은 링크들..
그 링크들의 정체를 알려주는 힌트인 툴팁..
이렇듯 고마운 툴팁이지만 가끔씩 구리다는 느낌을 지울수 없다.
특히 이런거...
대부분의 툴팁은 이런 모양이다. 허연 바탕에 꺼먼글씨...
마우스를 옮기면 사라졌다 다시 나타나는 게릴라같은 툴팁...
왠지 신경쓰인다.
에서 도저히 용납될 수 없다.
속성을 이용해서 보여줄 수 있는 일반적인 툴팁은 솔찬히 구리다.
따라서 이번에는 툴팁을 아름답게 꾸며주는 스크립트를 하나 소개할테다. (원문 :
을 다운받아 압축을 풀어놓는다.
<body> 태그 안에 다음 라인을 삽입한다.
<head>에 넣지 마시길...
<script type="text/javascript" src="경로/wz_tooltip.js"></script>
아래와 같은 방식으로 본문의 링크에 원하는 툴팁 메시지를 추가해주면 된다.
<a href="..." onmouseover="Tip('내용')" onmouseout="UnTip()"> ... </a>
내용부분에는 텍스트, 테이블, 이미지 등 다른 태그가 포함될 수 있다.
기본적인 모양은 이렇다. ←마우스 오버
!주의! 내용부분에 따옴표(',")는 사용할수 없다. 대신 \'나 "를 사용하시라! (아니면 이렇게..) <a onmouseover="TagToTip('ID', ..커맨드..)" onmouseout="UnTip()">...</a>
··· ···
<span id="ID">내용</span>
예시 하나만 더보자
예) 꼴뚜기 ←마우스 오버
소스)
<A onmouseover="Tip('<img src= "http://mr-ok.com/tc/attach/1/ggol.jpg" />')" onmouseout=UnTip()>꼴뚜기</A>
외부링크의 미리보기를 가능하게하는
Snap Shots라는 서비스가 있는데, 이미지파일 링크만 단독적으로는 미리보기가 안된다. 하지만 이 스크립트를 이용하면 손쉽게 바로바로 볼 수 있다.
백그라운드 ,
테두리,
말풍선,
버튼,
페이드 효과,
지연/지속시간,
윗툴팁/그림자 등...
더 자세한 속성을 알고싶으면 원문출처를 방문하시라~
댓글을 달아 주세요
툴팁의 문제라면 모양이 구린 것도 있지만 툴팁이 살아있는 시간을 설정할 수 없다는 점이더군요.
말풍선이 마음에 드네요. 저는 '자겐'으로 '자구현'의 길을...
맞습니다. 어떤경우는 툴팁이 빨랑 안없어지고 꼴불견처럼 화면보는걸 훼방할때도 있어서 마우스를 구석으로 몰아넣곤 한다죠;; 또, 툴팁 나오기 전까지 지연시간도 설정할 수 없죠. 스치기만해도 귀신같이 나오는 툴팁.. 두더지도 아니고...
당분간 스크립트나 가지고 놀아야겠습니다. 잘만하면 snaps의 기능도 될것같은데..
'지나친 자겐'은 정신건강에 해롭습니다~
우와! 이 좋은팁이! 감사합니다. 신기하네요.ㅋ
반갑습니다 궁극의 힘님!
희귀한 블로그를 운영하고 계시는군요. 원작만화라...저도 Nikopol 3부작 만화가 작화가 좋다고해서 구했는데 프랑스어라서 아직도 못보고 있다죠^^;
스크립트 유용하게 쓰세요~(제가 만든건 아니지만..)
Sleepy님 :) 댓글 주신거 보고 들어왔습니다.....ㅎㅎㅎㅎㅎㅎㅎㅎㅎ
블로그 제목이 Sleepy Tiger시네요
저도 Tiger라는 걸 가끔 썼었는데요 ㅎㅎ(이름 뒷자가 '범' 이라서요 ㅋ )
어째 그것도 비슷할 거 같다는 생각이 드는군요.
제 닉네임은 첫 글자가 소문자입니다.
아무튼 비슷한 분을 뵈니 반갑습니다. :)
서울 사시면 번개라도 ㅋㅋ :P
Tiger를 사용하셨다니 새로운 공통점이 있군요~ 자고로 호랭이 좋아하는 사람치고 나쁜놈 없다고...
저는 단지 동물중에 호랭이가 좋아서 Tiger를 사용합니다.
지금 용인 사는데 서울 올라갈때 연락드리면 형님께서 맛난거 사주시나요? ^o^
사무실이 서초동에 있으니 언제든지 연락주시고 오시면
삼겹살정도는 쏩니다 :)
와우~ 정말로 친절하십니다. 어찌 감히 염치불구하고 얻어먹겠냐만은...
기회가 된다면 용기내어 사전에 연락드리고 뵙겠습니다^^
오호~ 좋은 팁이네연.. 호박은 일일이 '호박툰닷컴'이란 글을 삽입하는뎅^^a
근데 Sleepy님~ 호박은 저것도 궁금하네연.. 무지무지무지!
댓글안에 색깔지정을 어케 따로해주나여? 위에보면 형님께서만 뻘건색인데.. 넘 신기해연!
갈챠주세요~~~~~~~~~~~~~~~~~~~~~~~~~~~~~오!
넹?
ㅋㅋㅋㅋㅋ (완전 소원이라는듯 두손꼭 모고 부탁드리는 호박^^;)
호박님, 댓글에 색깔을 지정해주는 태그는...
댓글폼아래 있는 ↑이겁니다.
이름은 BB코드 플러그인이고 텍스트큐브용은 여기 있습니다.
몇가지 코드를 사용할 수 있고 또 필요한건 만들어 추가할수도 있지요.
티스토리용 BB코드 플러그인이 있는지 모르겠네요. 없는걸로 알고있는데...
없다면 할 수 없습니다. 티스토리에 넣어달라고 자꾸 조르던가.. 아님 스킨에서 직접 지원하게끔 고치는수 밖에요ㅠㅠ
잘쓸게요
요긴하게 쓰세요^^
새로운 블로그 스킨 만드는 데 도움이 되었습니다. ^--^ 감사해요.
뭘요^^ 도움이 되었다니 제가 더 감사합니다~~
이번에는 그렇게 못 했지만,
태터데스크에 적용해서
썸네일에 마우스오버하면 제목과 내용 테이블이 툴팁으로 뜨게 하는 것을 다음번에 해보려구요..^^
오~ 멋지구리하네요. 앞으로 웹페이지 조물락거리다 모르는거 있으면 Grace님에게 여쭤야겠습니다^^