강의 컨설팅 트레이닝 무료진단 무료책자 마케팅편지 마케팅정보공유 다이어리 서비스제휴 고객센터

버튼 미디어 플래이어를 구현해 보자
작성자 : 99 단국강토
등록날짜 : 2009.02.19 10:45
3,028

download.asp?FileID=15622579
download.asp?FileID=15622580

 

<left>
<DIV id=music1 style="DISPLAY: block;" onclick="document.all['music3'].style.display='block';document.all['music1'].style.display='none';document.all['music2'].style.display='block'">
<IMG onmouseover="button2=this.src; this.filters[0].apply(); this.src='http://myhome.naver.net/dajuji/dajuji_img/4-4.jpg'; this.filters[0].play();" style="FILTER: progid:DXImageTransform.Microsoft.Fade" onmouseout="this.filters[0].apply(); this.src=button2; this.filters[0].play();" style="CURSOR: hand" onclick=MusicEngine.CONTROLS.STOP(); src="
http://myhome.naver.net/dajuji/dajuji_img/4-3.jpg" border=0></DIV>

<DIV id=music2 style="display:none;" onclick="document.all['music3'].style.display='none';document.all['music2'].style.display='none';document.all['music1'].style.display='block'">
<IMG onmouseover="button1=this.src; this.filters[0].apply(); this.src='http://myhome.naver.net/dajuji/dajuji_img/4-2.jpg'; this.filters[0].play();" style="FILTER: progid:DXImageTransform.Microsoft.Fade" onmouseout="this.filters[0].apply(); this.src=button1; this.filters[0].play();" style="CURSOR: hand" onclick="MusicEngine.URL = '음악주소' ;" src="
http://myhome.naver.net/dajuji/dajuji_img/4-1.jpg" border=0></DIV>

<DIV id=music3 style="display:none">
<OBJECT ID="MusicEngine" style="WIDTH: 0px; HEIGHT: 0px" CLASSID="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">
<PARAM NAME="URL" VALUE="음악주소">
<PARAM NAME=VOLUME VALUE=100>
<PARAM NAME=AUTOSTART VALUE=1>
<PARAM NAME=SCREEN VALUE=0>
</OBJECT></DIV>
</left>

 

색상으로 구분 하세요. ^^

음악주소
시작버튼 처음에 보일 그림주소
마우스 대면 변할 시작버튼 그림주소
정지버튼 처음에 보일 그림주소
마우스 대면 변할 정지버튼 그림주소

커서를 움직여 위치를 정하면 되는데 주의 할점은 이미지의 위, 아래 위치가 같아야 합니다.

 

download.asp?FileID=15622581
download.asp?FileID=15622582

<left>

<DIV id=music4 style="DISPLAY: block;" onclick="document.all['music6'].style.display='block';document.all['music4'].style.display='none';document.all['music5'].style.display='block'">
<IMG onmouseover="style.filter='gray'" title=STOP style="FILTER: ray; CURSOR: hand" onclick=MusicEngine.CONTROLS.STOP(); onmouseout="style.filter='ray'" src="http://myhome.naver.net/dajuji/dajuji_img/1-4-musicengine.jpg">
</DIV>

<DIV id=music5 style="display:none;" onclick="document.all['music6'].style.display='none';document.all['music5'].style.display='none';document.all['music4'].style.display='block'">
<IMG onmouseover="style.filter='gray'" title=PLAY style="FILTER: ray; CURSOR: hand" onclick="MusicEngine.URL = '음악주소' ;" onmouseout="style.filter='ray'" src="http://myhome.naver.net/dajuji/dajuji_img/1-3-musicengine.jpg">
</DIV>

<DIV id=music6 style="display:none">
<OBJECT ID="MusicEngine" style="WIDTH: 0px; HEIGHT: 0px" CLASSID="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">
<PARAM NAME="URL" VALUE="음악주소">
<PARAM NAME=VOLUME VALUE=100>
<PARAM NAME=AUTOSTART VALUE=1>
<PARAM NAME=SCREEN VALUE=0>
</OBJECT>
</DIV>
</left>

 

 

download.asp?FileID=15622582download.asp?FileID=15622581

 

<OBJECT ID="MusicEngine" style="WIDTH: 0px; HEIGHT: 0px"
CLASSID="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">
<PARAM NAME="URL" VALUE="음악 주소">
<PARAM NAME=VOLUME VALUE=100>
<PARAM NAME=AUTOSTART VALUE=1>
<PARAM NAME=SCREEN VALUE=0>
</OBJECT>

<IMG onmouseover="style.filter='gray'" title=PLAY style="FILTER: ray; CURSOR: hand" onclick="MusicEngine.URL = '음악주소' ;" onmouseout="style.filter='ray'" src="http://myhome.naver.net/dajuji/dajuji_img/1-3-musicengine.jpg">
<IMG onmouseover="style.filter='gray'" title=STOP style="FILTER: ray; CURSOR: hand" onclick=MusicEngine.CONTROLS.STOP(); onmouseout="style.filter='ray'" src="http://myhome.naver.net/dajuji/dajuji_img/1-4-musicengine.jpg">

 

음악주소는 같으면 좋겠고 시작버튼 그림주소정지버튼 그림주소를 구분 하는게 좋겠네요.


출처 : Tong - ddakzzi님의 Tag&Script통

"쇼핑몰·홈페이지·오픈마켓
블로그·페이스북·이메일 등의 각종 마케팅 글쓰기,
각종 광고, 영업, 판매, 제안서, 전단지
반응율 3배×10배 이상 높이는 마법의 8단계 공식"
자세히보기

Comments

번호 제목 글쓴이 날짜 조회
3195 투명 테이블 99 단국강토 02.19 2075
3194 이미지 사용하지 않고, HTML문서에 그라데이션 표현하기 99 단국강토 02.19 2118
3193 HTML 문서에서 데스크탑용 커서 사용하기 99 단국강토 02.19 2676
3192 테이블로 입체버튼 만들기 99 단국강토 02.19 2362
3191 html 문서에 테두리 넣기 99 단국강토 02.19 2512
3190 List 아이템을 그림으로 바꾸기 99 단국강토 02.19 2066
3189 프린트 할때 폰트 다르게 표현하기 99 단국강토 02.19 2394
3188 media-print CSS 를 아시나요? 99 단국강토 02.19 2140
3187 스타일시트 99 단국강토 02.19 2443
3186 한줄 Tip 99 단국강토 02.19 2706
3185 [css] 텍스트 / 폼 / 테이블 / 버튼 / 체크박스 99 단국강토 02.19 2605
3184 link색 바꾸기 99 단국강토 02.19 3138
열람중 버튼 미디어 플래이어를 구현해 보자 99 단국강토 02.19 3029
3182 CSS 사용방법 - 폰트표현 99 단국강토 02.19 4767
3181 CSS 사용 표현 - 위치표현 99 단국강토 02.19 2691
3180 레이어(Layer) 팝업 만들기 99 단국강토 02.19 3178
3179 문자열 체크 99 단국강토 02.19 1784
3178 onUnLoad 이벤트 제어하기 99 단국강토 02.19 2713
3177 onUnLoad 이벤트 제어하기 99 단국강토 02.19 2895
3176 Input Box의 readOnly 속성 제어하기 99 단국강토 02.19 2989
3175 Input Box의 readOnly 속성 제어하기 99 단국강토 02.19 2654
3174 iframe 속성 설명 99 단국강토 02.19 2351
3173 iframe 속성 설명 99 단국강토 02.19 2412
3172 Textare 에 이미지 넣기 99 단국강토 02.19 1642
3171 Textare 에 이미지 넣기 99 단국강토 02.19 2080
3170 form enctype (encoding) 조절하기 99 단국강토 02.19 2380
3169 form enctype (encoding) 조절하기 99 단국강토 02.19 2864
3168 new Image() 사용하기 99 단국강토 02.19 1661
3167 new Image() 사용하기 99 단국강토 02.19 2053
3166 특수문자 입력 방지하기 99 단국강토 02.19 3341
마케팅
특별 마케팅자료
다운로드 마케팅자료
창업,경영
기획,카피,상품전략
동기부여,성취