실시간 채팅창 좀더 깔끔하게~ 정보
실시간 채팅창 좀더 깔끔하게~관련링크
본문
아래 Photofly님이 쓰신글과 중복이 되길래 쓸까 말까 하다가 올립니다.
다른점이라면 사이즈를 고정하고 레이어로 보기싫은 부분은 전부 가려버렸다는것~
레이어로 처리한 부분은 사용자가 적당한 이미지로 채워서 좀더 이뿌게 만들수도 있습니다.
그럼 소스 올라갑니다.
아래 소스를 mini_chat.htm 으로 저장하세요.
<html>
<head>
<META HTTP-EQUIV="Page-Enter" CONTENT="BlendTrans(Duration=0.5)">
<style>
A:link,A:visited,A:active {font-family:돋움,돋움체; color:#ED6C1F;font-size:8pt;letter-spacing:-1;text-decoration:underline;}
A:hover {font-family:돋움,돋움체; color:#ED6C1F;font-size:8pt;letter-spacing:-1;text-decoration:underline;}
.bbs { color:#000;font-size:12px; text-decoration:none; }
.bbs:link, .bbs:visited, .bbs:active { color:#000;font-size:12px; font-weight:bold; text-decoration:none; }
.bbs:hover { color:#000;font-size:12px; font-weight:bold; text-decoration:underline; }
font {font-family:돋움,돋움체; color:#555555;font-size:8pt;letter-spacing:-1}
font.num {font-family:tahoma; font-size: 7pt; color:#1CB20C;}
.all { border-width:1; border-color:#dadada; border-style:solid; }
</style>
</head>
<BODY LEFTMARGIN="0" TOPMARGIN="0" MARGINwidth="0" MARGINheight="0" onmouseover="window.status='iuman.net';return false;" onContextMenu="return false;">
<div id="chat_div_out" style="width:600px; height:300px; position:absolute; left:0px; top:-4px; z-index:111;">
<div id="chat_div_01" style="width:600px; height:59px; position:absolute; left:0px; top:0px; z-index:111;background:#349E06">
<table cellpadding="0" cellspacing="0" width="600">
<tr height="59">
<td width="20"> </td>
<!-- <td width="110" style="font-family:tahoma;padding-bottom:4px;font-size:20px;font-weight:bold;color:#FFE500" valign="bottom">iuman.net</td> -->
<td style="font-size:12px;color:#FFFFFF;padding-bottom:10px;" valign="bottom">
<div style="padding:4px;background:#323430;color:#CECECE;border:1px solid #191A18">알지보드 사용자들을 위한 커뮤니티 사이트를 운영중인 iuman 입니다.<br>질문하실것이 있으시다면 <b style="color:#F0F0F0">iuman.net</b> 게시판에 글남겨주세요!</div>
</td>
<td width="20"> </td>
</tr>
</table></div>
<div id="chat_div_02" style="width:2px; height:148px; position:absolute; left:0px; top:59px; z-index:111;background:#349E06">
</div>
<div id="chat_div_03" style="width:2px; height:148px; position:absolute; left:598px; top:59px; z-index:111;background:#349E06">
</div>
<div id="chat_div_04" style="width:600px; height:8px; position:absolute; left:0px; top:207px; z-index:111;background:#349E06">
<table cellpadding="0" cellspacing="0" width="600">
<tr>
<td><img src="chat/skin/homebox01/homebox_chat_05_01.gif" width="2" height="8"></td>
<td style="background:url(chat/skin/homebox01/homebox_chat_05_02.gif); repeat-x fixed left top;" width="836"></td>
<td><img src="chat/skin/homebox01/homebox_chat_05_03.gif" width="2"></td>
</tr>
</table></div>
<div id="chat_div_05" style="width:49px; height:15px; position:absolute; left:0px; top:215px; z-index:111;background:#349E06;font-size:11px;padding-top:2px;text-align:right;color:#FFFFFF">
대화명 </div>
<div id="chat_div_06" style="width:10px; height:15px; position:absolute; left:132px; top:215px; z-index:111;background:#349E06">
</div>
<div id="chat_div_07" style="width:2px; height:15px; position:absolute; left:186px; top:215px; z-index:111;background:#349E06">
</div>
<div id="chat_div_08" style="width:415px; height:15px; position:absolute; left:187px; top:215px; z-index:111;background:#349E06">
</div>
<div id="chat_div_09" style="width:440px; height:12px; position:absolute; left:0px; top:230px; z-index:111;background:#349E06">
<table cellpadding="0" cellspacing="0" width="600">
<tr>
<td></td>
</tr>
</table></div>
<div id="chat_div_10" style="width:22px; height:32px; position:absolute; left:0px; top:242px; z-index:111;background:#349E06">
</div>
<div id="chat_div_11" style="width:26px; height:32px; position:absolute; left:574px; top:242px; z-index:111;background:#349E06">
</div>
<div id="chat_div_12" style="width:600px; height:12px; position:absolute; left:0px; top:274px; z-index:111;background:#349E06">
</div>
<div id="chat_div_13" style="width:600px; height:12px; position:absolute; left:0px; top:286px; z-index:111;background:#666666">
</div>
<table width="100%" cellpadding="0" cellspacing="0" style="table-layout:fixed">
<col width="100%"></col>
<tr>
<td height="296"><iframe src='http://cw.gabbly.com/gabbly/cw.jsp?e=1&t=http://를 제외한 자신의 홈페이지주소' scrolling='no' style='width:600px; height:300; padding:0 0 0 0; margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px;' frameborder='0'></iframe></td>
</tr>
</table>
</div>
</body>
</html>
자신의 홈페이지 적당한 곳에 실시간 채팅을 위한 아래 링크를 달아둡니다.
<a href="#" onClick="if(confirm('운영자가 접속한 경우에만 대화가 가능합니다.')) window.open('mini_chat.htm','chat','width=600,height=280');">실시간대화</a>
위 소스는 홈박스님이 제작하신것을 참고하여 제 홈에서 사용중인 것입니다.
제홈페이지 http://iuman.net 로 오시면 프레임을 나누어 윗부분을 채팅창으로 사용하고있습니다.
게시판 링크를 오시는분이 많아서 전 따로 새창으로 열리도록 하였는데요.
그곳에 쓰인 소스였습니다.
프레임을 나누어 사용한것을 보시려면 홈페이지 오셔서 오른쪽 메뉴부분에 있는 실시간대화열기를 선택하시면 숨겨진프레임이 열리고 새창으로 선택하시면 위 소스가 적용된 창이 보이실겁니다.
다른점이라면 사이즈를 고정하고 레이어로 보기싫은 부분은 전부 가려버렸다는것~
레이어로 처리한 부분은 사용자가 적당한 이미지로 채워서 좀더 이뿌게 만들수도 있습니다.
그럼 소스 올라갑니다.
아래 소스를 mini_chat.htm 으로 저장하세요.
<html>
<head>
<META HTTP-EQUIV="Page-Enter" CONTENT="BlendTrans(Duration=0.5)">
<style>
A:link,A:visited,A:active {font-family:돋움,돋움체; color:#ED6C1F;font-size:8pt;letter-spacing:-1;text-decoration:underline;}
A:hover {font-family:돋움,돋움체; color:#ED6C1F;font-size:8pt;letter-spacing:-1;text-decoration:underline;}
.bbs { color:#000;font-size:12px; text-decoration:none; }
.bbs:link, .bbs:visited, .bbs:active { color:#000;font-size:12px; font-weight:bold; text-decoration:none; }
.bbs:hover { color:#000;font-size:12px; font-weight:bold; text-decoration:underline; }
font {font-family:돋움,돋움체; color:#555555;font-size:8pt;letter-spacing:-1}
font.num {font-family:tahoma; font-size: 7pt; color:#1CB20C;}
.all { border-width:1; border-color:#dadada; border-style:solid; }
</style>
</head>
<BODY LEFTMARGIN="0" TOPMARGIN="0" MARGINwidth="0" MARGINheight="0" onmouseover="window.status='iuman.net';return false;" onContextMenu="return false;">
<div id="chat_div_out" style="width:600px; height:300px; position:absolute; left:0px; top:-4px; z-index:111;">
<div id="chat_div_01" style="width:600px; height:59px; position:absolute; left:0px; top:0px; z-index:111;background:#349E06">
<table cellpadding="0" cellspacing="0" width="600">
<tr height="59">
<td width="20"> </td>
<!-- <td width="110" style="font-family:tahoma;padding-bottom:4px;font-size:20px;font-weight:bold;color:#FFE500" valign="bottom">iuman.net</td> -->
<td style="font-size:12px;color:#FFFFFF;padding-bottom:10px;" valign="bottom">
<div style="padding:4px;background:#323430;color:#CECECE;border:1px solid #191A18">알지보드 사용자들을 위한 커뮤니티 사이트를 운영중인 iuman 입니다.<br>질문하실것이 있으시다면 <b style="color:#F0F0F0">iuman.net</b> 게시판에 글남겨주세요!</div>
</td>
<td width="20"> </td>
</tr>
</table></div>
<div id="chat_div_02" style="width:2px; height:148px; position:absolute; left:0px; top:59px; z-index:111;background:#349E06">
</div>
<div id="chat_div_03" style="width:2px; height:148px; position:absolute; left:598px; top:59px; z-index:111;background:#349E06">
</div>
<div id="chat_div_04" style="width:600px; height:8px; position:absolute; left:0px; top:207px; z-index:111;background:#349E06">
<table cellpadding="0" cellspacing="0" width="600">
<tr>
<td><img src="chat/skin/homebox01/homebox_chat_05_01.gif" width="2" height="8"></td>
<td style="background:url(chat/skin/homebox01/homebox_chat_05_02.gif); repeat-x fixed left top;" width="836"></td>
<td><img src="chat/skin/homebox01/homebox_chat_05_03.gif" width="2"></td>
</tr>
</table></div>
<div id="chat_div_05" style="width:49px; height:15px; position:absolute; left:0px; top:215px; z-index:111;background:#349E06;font-size:11px;padding-top:2px;text-align:right;color:#FFFFFF">
대화명 </div>
<div id="chat_div_06" style="width:10px; height:15px; position:absolute; left:132px; top:215px; z-index:111;background:#349E06">
</div>
<div id="chat_div_07" style="width:2px; height:15px; position:absolute; left:186px; top:215px; z-index:111;background:#349E06">
</div>
<div id="chat_div_08" style="width:415px; height:15px; position:absolute; left:187px; top:215px; z-index:111;background:#349E06">
</div>
<div id="chat_div_09" style="width:440px; height:12px; position:absolute; left:0px; top:230px; z-index:111;background:#349E06">
<table cellpadding="0" cellspacing="0" width="600">
<tr>
<td></td>
</tr>
</table></div>
<div id="chat_div_10" style="width:22px; height:32px; position:absolute; left:0px; top:242px; z-index:111;background:#349E06">
</div>
<div id="chat_div_11" style="width:26px; height:32px; position:absolute; left:574px; top:242px; z-index:111;background:#349E06">
</div>
<div id="chat_div_12" style="width:600px; height:12px; position:absolute; left:0px; top:274px; z-index:111;background:#349E06">
</div>
<div id="chat_div_13" style="width:600px; height:12px; position:absolute; left:0px; top:286px; z-index:111;background:#666666">
</div>
<table width="100%" cellpadding="0" cellspacing="0" style="table-layout:fixed">
<col width="100%"></col>
<tr>
<td height="296"><iframe src='http://cw.gabbly.com/gabbly/cw.jsp?e=1&t=http://를 제외한 자신의 홈페이지주소' scrolling='no' style='width:600px; height:300; padding:0 0 0 0; margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px;' frameborder='0'></iframe></td>
</tr>
</table>
</div>
</body>
</html>
자신의 홈페이지 적당한 곳에 실시간 채팅을 위한 아래 링크를 달아둡니다.
<a href="#" onClick="if(confirm('운영자가 접속한 경우에만 대화가 가능합니다.')) window.open('mini_chat.htm','chat','width=600,height=280');">실시간대화</a>
위 소스는 홈박스님이 제작하신것을 참고하여 제 홈에서 사용중인 것입니다.
제홈페이지 http://iuman.net 로 오시면 프레임을 나누어 윗부분을 채팅창으로 사용하고있습니다.
게시판 링크를 오시는분이 많아서 전 따로 새창으로 열리도록 하였는데요.
그곳에 쓰인 소스였습니다.
프레임을 나누어 사용한것을 보시려면 홈페이지 오셔서 오른쪽 메뉴부분에 있는 실시간대화열기를 선택하시면 숨겨진프레임이 열리고 새창으로 선택하시면 위 소스가 적용된 창이 보이실겁니다.
추천
0
0
댓글 11개
좋은 팁 감사합니다.....^^
오 좋습니다~!
좋은 기능 감사합니다.
드디어 프레임으로 나눈 소스가 나왔네요.
저는 프레임이 잘 않되어 iWindow를 이용해 테스트 중입니다.
처음에는 우측 스크롤메뉴에 넣어 사용했는데, Script끼리 충돌이 생겨서인지 않되길래
일단 왼쪽메뉴에 넣어 테스트 중입니다.
참조하실 분 http://www.ebs.biz 왼쪽메뉴에 ~
저는 프레임이 잘 않되어 iWindow를 이용해 테스트 중입니다.
처음에는 우측 스크롤메뉴에 넣어 사용했는데, Script끼리 충돌이 생겨서인지 않되길래
일단 왼쪽메뉴에 넣어 테스트 중입니다.
참조하실 분 http://www.ebs.biz 왼쪽메뉴에 ~
이 채팅창을 초기화하려면 어떻게 하지요?
예전의 채팅메세지가 그대로 남아 있어서요.
예전의 채팅메세지가 그대로 남아 있어서요.
다른 방법은 없더군요...
링크 주소의 끝부분 자신의 도메인명뒤에 적당한 파일명을넣어두었다가 필요할때마다 파일명을 바꾸세요...^^
링크 주소의 끝부분 자신의 도메인명뒤에 적당한 파일명을넣어두었다가 필요할때마다 파일명을 바꾸세요...^^
허 그것참!
답변 감사합니다
답변 감사합니다
고맙게 사용하겠습니다
.
esf