우측 고정 레이어 만들기 정보
우측 고정 레이어 만들기
관련링크
http://www.grass.or.kr
648회 연결
본문
<a name="dow"><!-- tail.php 카피라이트 끝 부분에 아무곳에나 붙여넣기-->
<!-- ## 우측 고정 레이어 영역 div 이부분부터는 tail.php 제일 하단에 붙여 넣기-->
<style type="text/css">
body{
background-repeat: no-repeat;
background-position: center bottom;
border-bottom:0;
}
#bottom_fixed_div_set2{
position:fixed;
_position:absolute;
bottom:10px;
overflow:hidden;
z-index:200;
_top:expression(document.body.scrollTop+document.body.clientHeight-this.clientHeight);
_left:expression(document.body.scrollLeft + document.body.clientWidth - offsetWidth);
right:0px;
width:45px;
text-align:center;
filter:alpha(opacity=85); opacity:0.85;
height:207;
color:#222222;
padding:0 0 0 0;
}
#bottom_fixed_div_set2 img{border-width:0; margin-right:1; vertidcal-align:middle;}
#bottom_fixed_div_set2 A{text-decoration:none; color:#222222; font:normal 8pt 돋움;}
#bottom_fixed_div_set2 A:link{text-decoration:none; color:#222222;}
#bottom_fixed_div_set2 A:visited{text-decoration:none; color:#222222;}
#cnt_rem_cart,#cnt_rem_wish,#cnt_rem_view{color:#CF4731; font:bold 7pt Tahoma;}
</style>
<div id='bottom_fixed_div_set2'>
<table>
<tr>
<td align=center>
<a href="#" title=''><img src='/a/img/b220.gif'border=0 align=absmiddle></a>
</td>
</tr>
<tr>
<td align=center>
<a href="javascript:history.go(-1);" title='이전 페이지'><img src='/a/img/bk.gif'border=0 align=absmiddle></a>
</td>
</tr>
<tr>
<td align=center>
<a onclick=location.href='#' title='위로'><img src='/a/img/top.gif' border=0 align=absmiddle></a>
</td>
</tr>
<tr>
<td align=center>
<a href="#dow"title='아래로'><img src='/a/img/dow.gif'border=0 align=absmiddle></a>
</td>
</tr>
<tr>
<td align=center>
<a href='http://a.grass.or.kr/a'title='메인 페이지'><img src='/a/img/mas.gif'border=0 align=absmiddle></a>
</td>
</tr>
</table>
</div>
<!-- ## 우측 고정 레이어 영역 div [끝]-->
옛날 테크노트 쓸때 이용했던 것입니다.
필요 하신분 이용하세요
이미지는 만들어 쓰세요.
경로를 보시고..
늘 얻어 가기만 했는데....
<!-- ## 우측 고정 레이어 영역 div 이부분부터는 tail.php 제일 하단에 붙여 넣기-->
<style type="text/css">
body{
background-repeat: no-repeat;
background-position: center bottom;
border-bottom:0;
}
#bottom_fixed_div_set2{
position:fixed;
_position:absolute;
bottom:10px;
overflow:hidden;
z-index:200;
_top:expression(document.body.scrollTop+document.body.clientHeight-this.clientHeight);
_left:expression(document.body.scrollLeft + document.body.clientWidth - offsetWidth);
right:0px;
width:45px;
text-align:center;
filter:alpha(opacity=85); opacity:0.85;
height:207;
color:#222222;
padding:0 0 0 0;
}
#bottom_fixed_div_set2 img{border-width:0; margin-right:1; vertidcal-align:middle;}
#bottom_fixed_div_set2 A{text-decoration:none; color:#222222; font:normal 8pt 돋움;}
#bottom_fixed_div_set2 A:link{text-decoration:none; color:#222222;}
#bottom_fixed_div_set2 A:visited{text-decoration:none; color:#222222;}
#cnt_rem_cart,#cnt_rem_wish,#cnt_rem_view{color:#CF4731; font:bold 7pt Tahoma;}
</style>
<div id='bottom_fixed_div_set2'>
<table>
<tr>
<td align=center>
<a href="#" title=''><img src='/a/img/b220.gif'border=0 align=absmiddle></a>
</td>
</tr>
<tr>
<td align=center>
<a href="javascript:history.go(-1);" title='이전 페이지'><img src='/a/img/bk.gif'border=0 align=absmiddle></a>
</td>
</tr>
<tr>
<td align=center>
<a onclick=location.href='#' title='위로'><img src='/a/img/top.gif' border=0 align=absmiddle></a>
</td>
</tr>
<tr>
<td align=center>
<a href="#dow"title='아래로'><img src='/a/img/dow.gif'border=0 align=absmiddle></a>
</td>
</tr>
<tr>
<td align=center>
<a href='http://a.grass.or.kr/a'title='메인 페이지'><img src='/a/img/mas.gif'border=0 align=absmiddle></a>
</td>
</tr>
</table>
</div>
<!-- ## 우측 고정 레이어 영역 div [끝]-->
옛날 테크노트 쓸때 이용했던 것입니다.
필요 하신분 이용하세요
이미지는 만들어 쓰세요.
경로를 보시고..
늘 얻어 가기만 했는데....
추천
5
5
댓글 8개
좋은 정보네요. 각 브라우저마다 잘 동작하네요.
감사합니다
감사합니다
죄송한데요.. 우측에 고정레이어 말고 퀵메뉴 있자나요..사이드에 따라다니는 메뉴..
이것도 소스 좀 알려주심 안될까요..ㅠㅠ
이것도 소스 좀 알려주심 안될까요..ㅠㅠ
그건 플래시 입니다..
기본적인 소스 원하면 올려드리죠
<!-- ## 우측 슬라이딩 영역 div 시작 -->
<script type="text/javascript">
function CheckUIElements() {
var yMenu1From, yMenu1To, yOffset, timeoutNextCheck;
var wndWidth = parseInt(document.body.clientWidth);
yMenu1From = parseInt (webminiLayer.style.top, 10);
yMenu1To = document.body.scrollTop + 250; // 위쪽 위치
timeoutNextCheck = 500;
if ( yMenu1From != yMenu1To ) {
yOffset = Math.ceil( Math.abs( yMenu1To - yMenu1From ) / 10 );
if ( yMenu1To < yMenu1From )
yOffset = -yOffset;
webminiLayer.style.top = parseInt (webminiLayer.style.top, 10) + yOffset;
timeoutNextCheck = 10;
}
webminiLayer.style.left = (document.body.clientWidth/2)+503;
setTimeout ("CheckUIElements()", timeoutNextCheck);
}
function MovePosition() {
var wndWidth = parseInt(document.body.clientWidth);
// 페에지 로딩시 포지션
webminiLayer.style.top = 200;
webminiLayer.style.left = (document.body.clientWidth/2)+490;
webminiLayer.style.visibility = "visible";
// initializing UI update timer
CheckUIElements();
return true;
}
</script>
<script src="http://grass.or.kr/kjc_shop/skin_board/t_shop_default/b_script/flash.js"></script>// 이것은 플래시 구동소스입니다.이미지쓸경우 삭제
<div style="position:absolute; top:350px; left:expression( (document.body.clientWidth/2)+503);z-index:2; left: 980px;" id="webminiLayer" name="webminiLayer">
<table width="70" height="40" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align=center>
<a href="#" title='위로'><img src='/a/img/qme.gif'border=0 align=absmiddle></a>
</td>
</tr>
<tr>
<td align=center>
<script language="javascript">flash('http://grass.or.kr/kjc_shop/skin_board/t_shop_default/latest/a_quickmenu/quick_01.swf','70','230','','transparent','')</script>
</td>
</tr>
</table>
</div>
<script type="text/javascript">MovePosition();</script>
<!-- ## 우측 슬라이딩 영역 div [끝] -->
위에것과 비교 해보면 답 나옵니다
기본적인 소스 원하면 올려드리죠
<!-- ## 우측 슬라이딩 영역 div 시작 -->
<script type="text/javascript">
function CheckUIElements() {
var yMenu1From, yMenu1To, yOffset, timeoutNextCheck;
var wndWidth = parseInt(document.body.clientWidth);
yMenu1From = parseInt (webminiLayer.style.top, 10);
yMenu1To = document.body.scrollTop + 250; // 위쪽 위치
timeoutNextCheck = 500;
if ( yMenu1From != yMenu1To ) {
yOffset = Math.ceil( Math.abs( yMenu1To - yMenu1From ) / 10 );
if ( yMenu1To < yMenu1From )
yOffset = -yOffset;
webminiLayer.style.top = parseInt (webminiLayer.style.top, 10) + yOffset;
timeoutNextCheck = 10;
}
webminiLayer.style.left = (document.body.clientWidth/2)+503;
setTimeout ("CheckUIElements()", timeoutNextCheck);
}
function MovePosition() {
var wndWidth = parseInt(document.body.clientWidth);
// 페에지 로딩시 포지션
webminiLayer.style.top = 200;
webminiLayer.style.left = (document.body.clientWidth/2)+490;
webminiLayer.style.visibility = "visible";
// initializing UI update timer
CheckUIElements();
return true;
}
</script>
<script src="http://grass.or.kr/kjc_shop/skin_board/t_shop_default/b_script/flash.js"></script>// 이것은 플래시 구동소스입니다.이미지쓸경우 삭제
<div style="position:absolute; top:350px; left:expression( (document.body.clientWidth/2)+503);z-index:2; left: 980px;" id="webminiLayer" name="webminiLayer">
<table width="70" height="40" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align=center>
<a href="#" title='위로'><img src='/a/img/qme.gif'border=0 align=absmiddle></a>
</td>
</tr>
<tr>
<td align=center>
<script language="javascript">flash('http://grass.or.kr/kjc_shop/skin_board/t_shop_default/latest/a_quickmenu/quick_01.swf','70','230','','transparent','')</script>
</td>
</tr>
</table>
</div>
<script type="text/javascript">MovePosition();</script>
<!-- ## 우측 슬라이딩 영역 div [끝] -->
위에것과 비교 해보면 답 나옵니다
좋은팁 감사합니다 ^_^
감사합니다 ^^
#info {
background-image: url(#);
background-repeat: no-repeat;
background-position: 11px 112px;
width: 500px;
height: 190px;
position: fixed;
_position:absolute;
left: -10px;
bottom: 0px;
overflow: hidden;
z-index: 3;
_top:expression(document.body.scrollTop+document.body.clientHeight-this.clientHeight);
_left:expression(document.body.scrollLeft + document.body.clientWidth - offsetWidth);
}
왼쪽에 붙어나오게 하고싶어서 이렇게 수정하여 사용하였는데요~
일반 컴에서는 잘나오는데 노트북에서는 오른쪽으로 치우치네요ㅠㅠ? 뭐가 문제일까요..
으아 노트북 해상도에서의 익스8이 자꾸 문제네요..ㅠㅠ
background-image: url(#);
background-repeat: no-repeat;
background-position: 11px 112px;
width: 500px;
height: 190px;
position: fixed;
_position:absolute;
left: -10px;
bottom: 0px;
overflow: hidden;
z-index: 3;
_top:expression(document.body.scrollTop+document.body.clientHeight-this.clientHeight);
_left:expression(document.body.scrollLeft + document.body.clientWidth - offsetWidth);
}
왼쪽에 붙어나오게 하고싶어서 이렇게 수정하여 사용하였는데요~
일반 컴에서는 잘나오는데 노트북에서는 오른쪽으로 치우치네요ㅠㅠ? 뭐가 문제일까요..
으아 노트북 해상도에서의 익스8이 자꾸 문제네요..ㅠㅠ
