웹마스터 팁
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
이걸로 며칠째 골치였는데 ;;;
레이아웃도 적용되더라구요!! 정말 감사합니다 ^^;