그라데이션 툴팁 만들기
http://oxtag.com/html/ex/tooltip.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv="content-type" content="text/html; charset=euc-kr">
<TITLE> </TITLE>
<style>
body,span,td,div {font-size:9pt;}
</style>
<!---- 아래의 소스코드를 <HEAD>와 </HEAD> 사이에 붙여 넣으세요 ---->
<SCRIPT>
var popWin = window.createPopup();
function callme()
{
if (event.srcElement.id=="first")
popWin.document.body.innerHTML = ofirst.innerHTML;
else if (event.srcElement.id=="second"){
popWin.document.body.innerHTML = osecond.innerHTML;}
var popupBody = popWin.document.body;
popWin.show(0, 0, 300, 50);
var realHeight = popupBody.scrollHeight;
popWin.hide();
popWin.show(0, 15 , 300, realHeight, event.srcElement);
}
</SCRIPT>
<!------------------------- 여기까지 ---------------------------------->
</HEAD>
<BODY>
<!---- 아래의 방법으로 원하는 위치에 복사 해 넣으세요. 마우스 오버시 나타나게 할려면 ONCLICK 대신 onmouseover를 사용. ------------------>
효과를 보시려면 <b><SPAN ID="first" ONCLICK="callme();" style=cursor:e-resize;>여기</SPAN></b> 나 <b><SPAN ID="second" ONCLICK="callme();" style=cursor:e-resize>여기</SPAN></b>를 클릭 하세요.
<DIV STYLE="display:none;">
<DIV ID="ofirst">
<DIV STYLE="background:#ffffcc; border:1px solid black; padding:4px; width:300px; font-family:verdana; font-size:70%; filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='yellowgreen', EndColorStr='#FFFFFF')">
<B>첫번째 풍선도움말</B>
<BR>
그라데이션 필터를 사용하였답니다
</DIV>
</DIV>
<DIV ID="osecond">
<DIV STYLE="background:#ffffcc; border:1px solid black; padding:4px; font-family:verdana; font-size:70%; width:300px; filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#0099FF', EndColorStr='#00FFFF')">
<B>두번째 풍선도움말</B>
<BR>
역시 그라데이션을 입혔네요<br>
여러가지 색상을 입혀 멋지게 꾸며 보세요<br>
빠빠이~!
</DIV>
</DIV>
</DIV>
<!------------------------- 여기까지 ---------------------------------->
</BODY>
</HTML>
'인터넷정보' 카테고리의 다른 글
키보드 눌러서 새창띄우기 (0) | 2007.10.17 |
---|---|
페이지 이동 스크립트 (0) | 2007.10.17 |
앞으로, 뒤로 가기를 마우스 휠로. (0) | 2007.10.17 |
프레임 화면이 아닌 페이지 접근시 차단이나 다른 페이지로 이동 (0) | 2007.10.17 |
접속시마다 백그라운드 이미지 랜덤으로 바꾸기 (0) | 2007.10.17 |
공지용 하루에 한번씩 새창(?) 열기. (0) | 2007.10.17 |
toggle(토글)... 숨겼다 보여줬다... (0) | 2007.10.17 |
유니코드/아스키코드 Keycode 값. (0) | 2007.10.17 |
방문객의 아이피(IP)를 내 홈에 달아보자. (0) | 2007.10.17 |
마우스 따라다니는 시계 (0) | 2007.10.17 |
레이어로 툴팁 효과내기
<A id=test1 onmouseover="js_layer_tooltip_show(event,'실험용실험용실험용실험용실험용실험용실험용실험용실험용실험용실험용\n험용실험용\n험용실험용\n험용실험용\n험용실험용\n험용실험용\n험용실험용\n',400)" title="실헙입니다1. 실험이죠">tvzxcest</A>
<A id=test1 onmouseover="js_layer_tooltip_show(event,'실험용2',200)" title="실헙입니다1. 실험이죠">tvzxcest</A>
/*========================================
js_lauer_tooltip.js
레이어 툴팁
ex>
js_layer_tooltip_show([이벤트:event],[내용],[너비],[높이]) //높이는 안 사용하길 추천.
<a id="test1" onmouseover="js_layer_tooltip_show(event,'내용',200[,200])" >test</a>
mins01,mins,공대여자
MSN,NateOn : mins01(at)lycos.co.kr
2007-03-08
"공대여자는 예쁘다."를 나타내야만 쓸 수 있습니다.
//========================================*/
var js_layer_tooltip_show_timeout_idx=null;
var js_layer_tooltip_root=null;
var js_layer_tooltip_show = function(evt,msg,width,height){
if(!js_layer_tooltip_root) {
js_layer_tooltip_root = js_layer_tooltip(msg,width,height);
document.body.appendChild(js_layer_tooltip_root);
}
if(js_layer_tooltip_root.innerHTML!=msg){
js_layer_tooltip_root.innerHTML = msg.replace(/\n/g,'<br />');
}
js_layer_tooltip_root.style.display='block';
width?width:200;
if(width)js_layer_tooltip_root.style.width=width+'px';
if(height)js_layer_tooltip_root.style.height=height+'px';
js_layer_tooltip_move(evt);
this_s = evt.toElement?evt.toElement:evt.currentTarget;
if(!this_s.onmouseout){
this_s.onmouseout=function(){js_layer_tooltip_hide()}
}
if(!this_s.onmousemove){
this_s.onmousemove=js_layer_tooltip_move;
}
}
var js_layer_tooltip_hide = function(){
js_layer_tooltip_root.style.display='none';
}
var js_layer_tooltip_move = function(evt){
evt=evt||event;
try{
js_layer_tooltip_root.style.left=evt.clientX+10+'px';
js_layer_tooltip_root.style.top=evt.clientY+10+'px';
}catch(e){}
}
var js_layer_tooltip = function(){
//========================================== 초기 설정
var id = 'layer_tooltip';
//========================================== 중복을 확인
if(document.getElementById(id)){
document.getElementById(id).a.focus();
return false;}
//========================================== 레이어를 만든다.
var div_ori = document.createElement('div');
var root = document.createElement('div');
root.style.cssText='text-align:left;padding:5px;position:absolute;left:10px;top:10px;font-size:12px;line-height:100%;border:1px solid #A6CBFC;';
root.style.backgroundColor='#DAE9FC';
return root;
}
'인터넷정보' 카테고리의 다른 글
회색 컬러, 그레이 색상 (0) | 2007.10.10 |
---|---|
이미지 자동 리사이즈 관련 함수 (0) | 2007.10.10 |
링크 자동 타겟 설정 (0) | 2007.10.10 |
[JS] 한글 초성, 중성, 종성 자르기 (0) | 2007.10.10 |
[PHP] 한글 초성,중성,종성 자르기 (0) | 2007.10.10 |
window.document.location 간단 설명 (0) | 2007.10.10 |
로보트 검색엔진에 잘 걸리는 Meta Tag 작성법 (0) | 2007.10.10 |
화이트 도메인, 실시간 스팸 차단 리스트 (0) | 2007.10.10 |
HTML안의 href와 src의 주소만 빼내는 정규식 (0) | 2007.10.10 |
쓸모있는 정규식 모음 JS버전 (0) | 2007.10.10 |