웹마스터 팁
BGM 등을 배경을 투명하게 iframe 으로 넣는 팁
2008.02.05 13:36
|
|
저 같은 경우는 BGM 이나 홈페이지용 악세사리를 아이프레임 방식으로 많이 넣습니다.
그런데 BGM 을 홈페이지에 넣을 때 바탕화면과의 조화가 중요한 것 같더군요.. 배경화면과 따로놀면 영 이상하더라는..
이 점은 BGM 자체의 배경화면색을 투명하게 하는 iframe 코드를 넣으면 해결 되더군요.
바로 이 코드입니다--> allowTransparency="true"
BGM 을 아이프레임으로 넣되 투명하게 넣는 방법을 몇가지 소개합니다..
방법1-고정된 프레임에 아이프레임으로 넣으실 때(제로보드XE 같은 원프레임 일때)
아래는 예제 코드 입니다.. 적용한 예 보기는 클릭 ---> http:/bgm.music24.kr/tr.htm
<IFRAME src="http://bgm.music24.kr/bgm/1.php" width=100% height="21" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" allowTransparency="true" ></IFRAME>
아이프레임으로 넣었을 때 BGM 자체의 바탕화면은 투명하게 하는 코드입니다..
방법2- BGM 을 프레임셋으로 나누어 넣으실 때
지금 http://lovene.dnip.net 와 같이 프레임 셋으로 나누어 넣으실 때는 BGM 을 넣을 프레임
문서(top.htm)를 만드셔서 서버에 올리시고 프레임셋에서 불러오게 하시되.. 그 만드신 프레임
문서에 아이프레임으로 BGM 을 투명하게 넣으시면 됩니다..
BGM 을 넣을 프레임 문서(top.htm)의 바탕화면을 메인프레임의 바탕화면과 같게 하시면 됩니다.
아래는 제 홈페이지에 적용한 예제입니다..
1.프레임셋문서-index.html
---------------------------------------
<html>
<head>
<title>홈페이지용 악세사리 BGM 뮤직플레이어,시계,날씨,큐브</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
</head>
<frameset rows="18, 1*" cols="1*" border="0">
<frame name="top" scrolling="no" marginwidth="0" marginheight="0" noresize src=http://bgm.music24.kr/top.htm>
<frame name="main" scrolling="auto" marginwidth="0" marginheight="0" src="http://lovene.dnip.net/tt/62" noresize>
<noframes>
<body text="#000000" link="#0000FF" vlink="#800080" alink="#FF0000">
</body>
</noframes>
</frameset>
</html>
=================================================================================
2.BGM 이 들어간 프레임문서(top.htm) -1번 BGM 을 투명하게 아이프레임으로 넣습니다.
----------------------------
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=euc-kr">
<title>http://bgm.music24.kr</title>
</head>
<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red" background="./top_dot.jpg" >
<p ALIGN="CENTER"> <iframe name="status" src="http://bgm.music24.kr/bgm/1.php" style="width:986PX;height:18px" frameborder="0" scrolling="no" allowTransparency="true" ></iframe></p>
</body>
</html>
1 번 프레임셋(index.html) 이 2번의 프레임(top.htm)을 불러오고 top.htm 은 배경이 투명한 BGM을 불러오는 거죠..
이상 바탕화면과 조화되게 BGM 을 투명하게 넣는 방법이었습니다..
----------------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------------
*추가로 제로보드 같은 원프레임 홈페이지에 끊김없이 음악이 재생되게 하는 팁소개입니다.
(바로 위의 프레임셋으로 나누어 넣는 방법(배경을 투명하게 하는 팁 방법2)이 제일 좋구요.. 이하는 팝업형으로 넣는 방법 소개들 입니다)
제로보드 같은 원프레임 홈페이지에서는 아이프레임 방식으로 BGM 뮤직플레이어를 넣으면 메뉴를 누를 때마다
음악이 끊기고 다시 처음부터 재생되기 때문에, 프레임셋으로 나누어 bgm 뮤직플레이어를 넣는 방법을 추천합니다만
그것이 여의치 않은 경우 , 아래와 같은 몇가지 방법으로 BGM 을 넣을 수 있습니다
방법1
스크립트 소스 넣기를 허용하는 경우에는 BGM 을 팝업시키는 방법이 있습니다
<script>popup=window.open('http://bgm.music24.kr/love','player','width=340 ,height=328')</script>
<script>popup=window.open('http://bgm.music24.kr/mini_player.php','player','width=139,height=56')</script>
<script>popup=window.open('http://bgm.music24.kr/bgm/16.php','player','width=159,height=87')</script>
위의 세가지 소스 중에 하나를 대문꾸미기나 홈페이지 원하는 페이지에 html 모드로 넣으시면 됩니다
* 추가설명: 지금 music24.kr 에는 50 여가지의 BGM 플레이어가 있는데요.. 위의 스크립트 소스를 조금 수정해서
원하시는 BGM 플레이어를 골라서 팝업시킬 수 있습니다.
예를 들어 43번 BGM 을 팝업시키시려면 위의 소스에서 BGM 번호와 가로(width=163) 세로 (height=63)으로
바꾸어 넣으시면 되는 겁니다.
<script>popup=window.open('http://bgm.music24.kr/bgm/43.php','player','width=163,height=63')</script>
방법2
스크립트를 허용하지 않는 경우에는 아래의 방법이 있습니다.
이 방법은 마우스로 BGM사진을 클릭하면 팝업되게 하는 방법입니다, 사진은 다른 예쁜 배너로 교체하셔도 되구요.
음악플레이어를 마우스로 클릭하면 작은 뮤직플레이어가 팝업됩니다.
이 방법은 홈페이지의 어느 곳에 넣어도 음악이 끊기는 일이 없다는 장점이 있고
홈페이지를 열었을 때 처음에는 음악이 나오지 않게 할 수 있다는 특징이 있습니다
|
|
뮤직플레이어 삽입 소스:아래의 소스를 홈페이지의 적당한 부분에 복사 붙여 넣으시면 됩니다
========================
<table style="WIDTH: 159px; HEIGHT: 91px" borderColor=#e7e7e7 cellSpacing=0 cellPadding=2 bgColor=#ffffff border=1 >
<tr>
<td width="159" height="85">
<p><A onclick="window.open('http://bgm.music24.kr/bgm/16.php','player','width=159,height=85');" href="javascript:void(0)"><img src=http://bgm.music24.kr/365.jpg width="159" height="85" border="0"></A></p>
</td>
</tr>
</table>
=========================
|
|
========================
<table style="WIDTH: 145px; HEIGHT: 62px" borderColor=#e7e7e7 cellSpacing=0 cellPadding=2 bgColor=#ffffff border=0 >
<tr>
<td width="145" height="62">
<p><A onclick="window.open('http://bgm.music24.kr/mini_player.php','player','width=139,height=56');" href="javascript:void(0)"><img src=http://bgm.music24.kr/mini_player/mini.jpg width="145" height="62" border="0"></A></p>
</td>
</tr>
</table>
=========================
방법3
아래의 코드를 홈페이지의 적당한 곳에 html 모드로 삽입해도 뮤직BGM 을 팝업시킬 수 있습니다.
<embed style="width:0px; height:0px;" src="http://bgm.music24.kr/music24.kr.swf>
방법4
* 간단히 텍스트로 링크를 거실 때는 아래의 소스를 각각의 BGM 에 맞는 사이즈로 변경하셔서 적용하시면 됩니다
아래의 소스는 16번 BGM 을 기준으로 한 소스입니다.. 아래의 소스를 홈페이지 적당한 곳에 html 방식으로
넣으시면 클릭햇을 때 작은 팝업 BGM 이 뜹니다..----> 예제보기 클릭-->음악듣기
--------------------------------------------
<a href="http://bgm.music24.kr/bgm/16.php" onclick="window.open
(this.href, '_blank'+
'+
', 'width=159,height=87,toolbars=no,scrollbars=no,top=0,left=0');
return false;" onfocus="this.blur()">음악듣기</a>
----------------------------------------------
추가 설명은 http://bgm.music24.kr 에서 enter 누르시면 보실 수 있습니다. 감사합니다.
댓글 3
-
치키맨
2009.01.04 18:19
-
feng
2009.12.30 12:29
<a href="http://www.mywebbags.com/chanel-bags-a01112-classic-flap-bag-product-2118.html">Chanel A01112</a>
<a href="http://www.mywebbags.com/chanel-bags-a01112-classic-flap-bag-product-2118.html">Chanel bags A01112</a>
<a href="http://www.mywebbags.com/chanel-bags-a01112-classic-flap-bag-product-2118.html" >Chanel handbags A01112</a><a href="http://www.mywebbags.com/chanel-bags-a20995-caviar-tote-bag-in-black-with-silver-hardware-product-1848.html">Chanel bags a20995</a>
<a href="http://www.mywebbags.com/chanel-bags-a20995-caviar-tote-bag-in-black-with-silver-hardware-product-1848.html">Chanel HANDbags a20995</a>
<a href="http://www.mywebbags.com/chanel-bags-a20995-caviar-tote-bag-in-black-with-silver-hardware-product-1848.html" >Chanel a20995</a> -
feng
2009.12.30 12:34
shopping cheap AND BEAUTIFUL CHANEL BAGS
| 제목 | 글쓴이 | 날짜 |
|---|---|---|
| 애드온에서 모바일 환경 구분 코드 | misol | 2010.12.24 |
| 회원가입후 1주일이 지나지 않은 계정에 한하여 탈퇴 제한하기 [1] | Arp | 2010.12.23 |
| BGM 등을 배경을 투명하게 iframe 으로 넣는 팁 [3] | 푸른커튼 | 2008.02.05 |
| 로그인 & 파일 첨부 문제 [3] | peter99 | 2009.06.29 |
지오피아 게임 제로보드 XE 연동
[5]
 | 다른사람 | 2009.06.30 |
|
XE에서 설문조사시 비회원 참여하는 방법 있을까요?
[1]
| hellosamyoo | 2010.10.12 |
| 게시판에서 비회원 메일 주소 확인하기 | 똑디 | 2009.10.12 |
| [생초보팁] 회원가입시 홈페이지 블로그주소 않나타내기 ㅋ [4] | 에혀라X | 2010.12.05 |
|
카페24 외부페이지로 트래픽 확인하기
[1]
| teryboy | 2010.10.09 |
|
확장변수값 이미지로 대체하여 나타내기 (실시간 응대목적)
[12]
| sm3 | 2009.06.10 |
|
게시판 글 검색시 검색 대상 선택을 자유롭게 고치기
[6]
| June Oh | 2009.07.15 |
| 랜덤으로 (최근) 게시물 추출하기.. [13] | 지허 | 2007.11.02 |
| 쉬운설치가 제대로 동작하지 않는 분들 [4] | 하늘03 | 2010.01.22 |
| 텍스타일 (Textyle) 에서 첨부파일 용량 제한 늘리는 방법. [1] | sejin7940 | 2010.11.27 |
| 분류가 있는 게시판에서 전체분류모드로 게시물 클릭시 딜레이 현상 [2] | Sx3 | 2007.08.30 |
| ftp나 mysql 암호 변경시 일어나는 ''db 접속시 에러' XE | 샷타이거 | 2010.12.08 |
| 플래시로 만들어진 글자 타이핑보고 만들었어요. | web | 2010.12.09 |
| [생초보팁] 페이지(page) 줄간격과 부분 웹폰트 | 에혀라X | 2010.12.11 |
| [생초보팁] 레이아웃 수정시 HTML 넣는 칸 넓히기 -_- | 에혀라X | 2010.12.12 |
|
[생초보팁] 웹진최근게시물 요약글 링크걸기
[1]
| 에혀라X | 2010.12.12 |
이걸로 며칠째 골치였는데 ;;;
레이아웃도 적용되더라구요!! 정말 감사합니다 ^^;