묻고답하기
이미지슬라이드에 동영상이미지 적용
2013.01.05 17:23
안녕하세요.
질문좀 올리겠습니다.ㅜㅜ
슬라이드소스에 다른 소스(이미지 클릭시 동영상 구동)를 적용 하고 싶은데요.
이미지슬라이드 기능에 이미지를 클릭하면 동영상이 구동되게 하는 기능을 적용하고자 합니다.
html 고수님들 잘 부탁드립니다.
- 슬라이드소스 -
<html>
<head><title>데모</title>
<script language="JavaScript1.1">
<!--
var slideimages=new Array()
var slidelinks=new Array()
function slideshowimages(){
for (i=0;i<slideshowimages.arguments.length;i++){
slideimages[i]=new Image()
slideimages[i].src=slideshowimages.arguments[i]
}
}
function slideshowlinks(){
for (i=0;i<slideshowlinks.arguments.length;i++)
slidelinks[i]=slideshowlinks.arguments[i]
}
function gotoshow(){
if (!window.winslide||winslide.closed)
winslide=window.open(slidelinks[whichlink])
else
winslide.location!=slidelinks[whichlink]
winslide.focus()
}
//-->
</script>
<meta name="generator" content="Namo WebEditor(Trial)">
</head>
<body>
<a href="javascript:gotoshow()"><img src="http://shyduke2.godohosting.com/!data/11.jpg" name="slide" border=0 width=600 height=375></a>
<script>
<!--
slideshowimages("http://shyduke2.godohosting.com/!data/11.jpg","http://shyduke2.godohosting.com/!data/cat.jpg","http://shyduke2.godohosting.com/!data/fence_01.jpg")
slideshowlinks("http://1번링크","http://2번링크","http://3번링크")
var slideshowspeed=5000
var whichlink=0
var whichimage=0
function slideit(){
if (!document.images)
return
document.images.slide.src=slideimages[whichimage].src
whichlink=whichimage
if (whichimage<slideimages.length-1)
whichimage++
else
whichimage=0
setTimeout("slideit()",slideshowspeed)
}
slideit()
//-->
</script>
</body>
</html>
- 이미지 클릭시 동영상 플레이 소스 -
<!-- 넓이하고 높이 잘 맞춰서 넣고 -->
<meta name="generator" content="Namo WebEditor(Trial)">
<div style="position:relative;width:291px;height:198px">
<div id="ImageCanvas" style="position:absolute; left:0; top:0; z-index:1; display:block;">
<!--
OnClick 설명
ImageCanvas.style.display='none'; => 이미지 보여주는 안보이게
MovieCanvas.style.display='block'; => 동영상 보여주는 부분 보이게
NSPlay.play() => 동영상 플레이
주의점!!! DIV 테그와 Object 테그에 ID 다르면 에러남.
-->
<img onclick="ImageCanvas.style.display='none';MovieCanvas.style.display='block';NSPlay.play()" height=198 src="http://img.giordano.co.kr/co_img001/giordano/media/Print/2008fall_b03_t.jpg" width="291" height="198">
</div>
<div id="MovieCanvas" style="position:absolute; left:0; top:0; z-index:1; display:none;">
<!-- 여기 동영상 플레이할 부분 알아서 HTML 테그 집어넣기 -->
<object id="NSPlay" name="NSPlay" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701"
type="application/x-oleobject " standby="Loading Microsoft Windows Media Player components..."
classid="CLSID:22D6f312-B0F6-11D0-94AB-0080C74C7E95" VIEWASTEXTn width="291" height="198" VIEWASTEXT>
<param name="ShowControls" value="false">
<param name="AutoStart" value="false">
<param name="AutoRewind" value="true">
<param name="Autosize" value="true">
<param name="AutoResize" value="true">
<param name="TransparentAtStart" value="false">
<param name="loop" value="true">
<param name="FileName" value="http://img.giordano.co.kr/co_img001/giordano/media/tvcm06/GIODANO2008_fall_30.asf">
<param name="volume" value="0" />--&gt;
<embed type="application/x-mplayer2"
pluginspage = "http://www.microsoft.com/Windows/Downloads/Contents/Products/MediaPlayer/"
id = "NSPlay"
name = "NSPlay"
showpositioncontrols = "1"
ShowControls = "false"
Autosize = "true"
AutoStart = "false"
showdisplay = "1"
showstatusbar = "1"
showtracker = "1"
loop = "true"
width = "291"
height = "198"
volume = "0"
src = "http://img.giordano.co.kr/co_img001/giordano/media/tvcm06/GIODANO2008_fall_30.asf" AutoRewind="true" AutoResize="true" TransparentAtStart="false"> </embed>
</object>
</div>
</div>
![http://shyduke2.godohosting.com/!data/11.jpg","http://shyduke2.godohosting.com/!data/cat.jpg","http://shyduke2.godohosting.com/!data/fence_01.jpg](http://shyduke2.godohosting.com/!data/11.jpg","http://shyduke2.godohosting.com/!data/cat.jpg","http://shyduke2.godohosting.com/!data/fence_01.jpg){kind=link}
제작의뢰 게시판을 이용해 보시는게 좋을것 같아요.