'툴팁'에 해당되는 글 2건

  1. 2008.02.15 레이어로 툴팁 효과내기
  2. 2008.01.29 그라데이션 툴팁 만들기

<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;
}

Posted by 알 수 없는 사용자
,


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>

Posted by 알 수 없는 사용자
,