워드프레스 플러그인을 찾던중 절망클럽에서 맘에 드는 툴팁이 있어 태터툴즈에 적용을 해보았다.
팬시툴팁 의 경우 태터툴즈의 플러그인 형태로 이미 나온 것으로 알고 있다.
ArekorePopup의 경우 태터툴즈 플러그인을 찾을 수 없어서 워드프레스용 플러그인 파일을 이용해서
스타일 시트와 자바스크립트 파일만 링크하면 별 무리가 없이 웬만한 웹페이지에서 사용이 할 수 있을 것 같다.
참고로 ArekorePopup 제작자 사이트에서는 언어가 일본어라 읽을 수 없었다. ㅠ.ㅠ
* 워드프레스의 플러그인 형태로 제작된 WP-ArekorePopup Plugin 1.0을 절망클럽에서 다운받는다.
( 워드프레스용 플러그인이며 버그나 기타 사용상의 문제는 알 수가 없고 이곳에서 참고하시기 바랍니다.)
* 내려받은 파일을 압축을 푼다. 그러면 images, Old_images 폴더와 파일들이 보인다.
* images 폴더와 ArekorePopup.css, ArekorePopup.js 을 적당한 위치에 업로드 한다.
(다른 파일은 샘플과 워드프레스용 플러그인을 적용하기 위한 파일이다.)
("Old_images"의 이미지 파일들을 사용하려면 ArekorePopup.js를 수정해야 한다.)
* 태터툴즈의 skin.html을 수정한다.
[CODE type="c"]//<head></head> 사이에 다음을 삽입해주면 된다.
<script language="javascript" type="text/javascript" src="업로드 경로/ArekorePopup.js"></script>
<link rel="stylesheet" href="업로드 경로/ArekorePopup.css" type="text/css" media="screen" />[/HTML][/CODE]
적용 이벤트는 a 에서는 title, img에서는 alt 값으로 적용이 된다.
예)
<a title="예제" href="예제주소" target="_blank">예제 글</a> 이라면 툴팁 상단에 "예제"라는 문자가 출력되고 아래에 "예제주소"가 출력된다.
<img src="이미지 주소" alt="대체 텍스트">일 경우 alt의 "대체 텍스트"가 툴팁상에 표시 된다.
<img src="이미지 주소" alt="대체 텍스트">일 경우 alt의 "대체 텍스트"가 툴팁상에 표시 된다.
사용하면서 어떤 버그나 이용상의 문제점이 있는지는 알 수 없다. 웹 언어를 전혀 모르는 나로서는 문제가 발생한다고 해도 수정할 능력이 되질 않는다.
일단 마음에 쏙 드는 툴팁을 적용했다는데 의의를 가져본다.