웹마스터 팁
ARTLAB님 팁을 참고하여 약간 변형 & 쫄쫄이 스토커 해상도에 상관없이 달기
2008.04.18 00:26
ARTLAB님이 엑소버드를 프레임에 넣고 그 프레임을 안 보이게 한뒤 본문 레이아웃 안에서 제어할 수 있게 올려주신거 보고 제가 약간 변형을 해봤습니다. 먼저 ARTLAB님께 감사를 드리며...
http://topssim.com
저는 엑소버드 대신 라디오 채널을 변경해 보겠습니다.
1. 프레임을 하나 추가해서 안 보이게 한뒤 불러오고
2. 졸졸이 스토커에 아이프레임을 삽입해서 그 안에 라디오 채널을 하나 더 설치 하였습니다.(이건 제가 이미지 작업 하기 귀찮아서 같은 라디오 2개 설치한 겁니다;)
이제 감춰진 프레임 안에 있는 라디오가 실제 동작 하는 라디오고 졸졸이 스토커에 달려 있는 라디오가 제어용이 되겠군요.
태그는 ARTLAB님이랑 같습니다
라디오는 정지 버튼을 예로 아래의 코드라 했을 때
<img src="img/b_stop.gif" border=0 width=30 height=13 style="cursor:hand" onclick="StopIt();">
ARTLAB님의 엑소보드 정지 버튼 코드는 아래와 같습니다
<A onClick="top.gst.wmpStop(); this.blur();" style="cursor:hand">멈춤</A>
엑소버드의 onclick 부분에 top.gst 처럼 타겟만 잡아주시면 바로 적용 되겠습니다. 라디오의 볼륨이나...재생상태 출력은... 능력 밖이라 포기;
쫄쫄이 스토커 해상도에 상관없이 달기
해상도가 달라져도 레이아웃 기본 테이블에 붙어 다니게끔 레이아웃 테이블과 div를 약간 추가했습니다
1. 레이아웃 테이블을 나눕니다(/레이아웃/layout.html)
2. 레이아웃 전체가 보통 1개의 테이블 안에 나눠져있을텐데 그 전체 테이블을 <TD>로 세로로 나눈뒤 오른쪽 <TD>에서 저는 작업을 했습니다(layout.html 하단부에 <TD>만 하나 더 넣어주시면 됩니다)
3. 그 다음 그 2번에서 만든 <TD>를 <td valign=top> 이용하여 수직정렬을 시킵니다(이걸 안해주시면 무조건 middle 정렬로 쫄쫄이가 가운데에 가버립니다. 긴 글을 읽었을때는 쫄쫄이가 한참 내려야 보이겠죠;)
4. 2번에서 만든 <TD> 안에 또 하나의 테이블을 더 만들고 그 안에 쫄쫄이 스토커 코드를 삽입하면 끝입니다
<td valign=top>
<div style="position:relative; z-index:50; left:5px; top:143px;">
<table width="100%" valign=top cellpadding="0" cellspacing="0" border="0"><tr><td>
<!-- 쫄쫄이 스토커-->
</td></tr></table>
</div>
</td>
-------------------------------------------------------------------------------------------------------
</table>
</div>layout.html 하단부 코드입니다.절취선 까지가 레이아웃을 반으로 자른 쫄쫄이 스토커가 나오는 부분입니다.
그리고 div 안에 top부분은 자신의 환경에 맞게 수정해주시면 됩니다.
댓글 3
-
artlab
2008.04.18 23:25
-
탑심
2008.04.19 08:16
ㅎㅎ 저도 날아다니는 졸졸이 볼때마다 이놈 좀 잡아줬으면...
artlab님 덕분에 원격(?) 제어 잘 쓰고 있습니다 :D -
덕분에 해결이 되었읍니다.
응용해결법(불필요한 구문이 있을 수 있읍니다. 일단은 정상가동중)
저는 좌측은 기본스킨 그대로 201px로 두고 우측본문을 둘로 쪼개서 졸졸이를 가두어봤읍니다( 변경내용, 추가내용).
< css에서 >
/* Site Layout - Column Right */
#columnRight { width:750px; float:left; margin-left:10px; overflow:hidden;}
#visualArea { width:750px; height:200px; background:#f5f5f5; margin-bottom:2.5em; position:relative; left:-15px; margin-right:-15px;}
#content { width:100%; overflow:hidden;}#mainright { position:relative; float:left; margin-top:0px; width:10px; z-index:50; left:0; top:40px; background:transparent;}
#mainright .stalker { position:relative; float:left; margin-top:0px; width:100%; height:200px; background:transparent;}/* Site Layout - Footer */
< layouts에서 >
<div id="columnRight">
<!-- 컨텐츠 시작 -->
{$content}</div>
<div id="mainright">
<div class="stalker">
<img width="100%" height="100" src="http://lure79.com/common/tpl/images/widget_bg.jpg" class="zbxe_widget_output" style="clear:both;" widget="alway_stalker" body="" skin="default" colorset="" widget_cache="0" addon_hold="0" addon_position="1" addon_basic="0" addon_width="980" addon_left="5" addon_top="40" addon_top_gap="40" addon_bottom="400" addon_scroll_speed="0" addon_scroll_move="10" addon_activate_speed="0" addon_textarea="" widget_sequence="10970" /> "<=졸졸이 위젯코드"
</div>
</div>
졸졸이는 0.3버전, 레이아웃은 고정선택에 베너유동인가 그걸로 선택해서 사용합니다.
졸졸이의 위치선택이 본문기준인거 같아서 top위치를 40정도로 두었읍니다. 하단고정위치도 저정도가 좋을 듯 합니다.
가동중인 예문을 보실려면 제 홈페이지에서 메인페이지 1차메뉴를 제외한 게시물에 적용되었읍니다(레이아웃 7개중 6개만 적용중입니다).
저도 레이어 제어 생각하다 졸졸이 생각을 해봤습니다만... ^^;
어쨌거나 BGM 하나 누가 쌔끈하게 만들었으면 속이 다 후련하겠습니다.