HTML中怎么实现点击图片进行音乐播放

HTML中怎么实现点击图片进行音乐播放,第1张

◆那是网页设计的技巧,使用网页制作软件,例如 Dreamweaver 就很容易实现。在图上作个热区,然后选用链接,再找到链接对象(可以是音乐、文本、另一个、视频等等)确认就行了。

让点击的时候自动播放音乐,需要用到html和js
<html>
<head>
<title>点击播放音乐</title>
</head>
<body>
<img src="路径/名称后缀名" onclick="image()">
<audio src="音乐路径/音乐名称后缀名" id="yinyue"></audio>
<script>
function image(){
var yinyue=documentgetElementById('yinyue')
yinyueplay()
}
</script>
</body>
</html>

有些可能是用flash来实现的,但是那种还是很简单。
比如:
<a href="url" target="_self"><img src="imgUrl"/></a>
这种方式是最简单的方式
还可以使用javascript来实现,这样就没有页面刷新了。

<DIV id=demo_1 style="OVERFLOW: hidden; HEIGHT: 136px">
<DIV id=demo1_1>
<div id=gleft>
<a href=""><img src="" border="0" width=150 height="120"/></a>
</div>
<div id=gleft>
<a href=""><img src="" border="0" width=150 height="120"/></a>
</div>
<div id=gleft>
<a href=""><img src="" border="0" width=150 height="120"/></a>
</div>
<div id=gleft>
<a href=""><img src="" border="0" width=150 height="120"/></a>
</div>
</DIV>
<DIV id=demo2_1></DIV></DIV>
<SCRIPT>
var speed=25
demo2innerHTML=demo1innerHTML
function Marquee(){
if(demo2offsetWidth-demoscrollLeft<=0)
demoscrollLeft-=demo1offsetWidth
else{
demoscrollLeft++
}
}
var MyMar=setInterval(Marquee,speed)
demoonmouseover=function() {clearInterval(MyMar)}
demoonmouseout=function() {MyMar=setInterval(Marquee,speed)} </SCRIPT>
其中<div id=gleft>这里的gleft的样式你自己定义下就OK了

你为什么不用<a>
例如:<a href="地址/picjpg" target="_blank"><img src="地址/picjpg" /></a>

你指的是在网页中插入视频对吧
有2中方式第一种<video>标签,但是不太好用
<video width="320" height="240" controls="controls">
<source src="moviemp4" type="video/mp4" />
<source src="movieogg" type="video/ogg" />
<source src="moviewebm" type="video/webm" />
<object data="moviemp4" width="320" height="240">
<embed src="movieswf" width="320" height="240" />
</object>
</video>
第二种就是<embed src=">你把视频传到优酷,新浪或是其他视频网站,之后取得视频的嵌入地址,把他嵌入在你制作的网页中。
主页面就是你的加上超链接,第二个页面就是嵌入的视频地址。不就可以了。
这个是点击连接视频的代码
<a href="连接视频页面地址" >
<img border="0" src="路径地址">
</a>
优酷视频的代码
找你上传完的视频,点击分享之后找到html代码,点复制。下一步把他粘贴在你的视频页面。


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/yw/13400495.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-07-29
下一篇 2023-07-29

发表评论

登录后才能评论

评论列表(0条)

保存