频道直达 - 学院 - 下载 - 交易 - 特效 - 字库 - 手册 -排名-工具- 繁體
网页教学网站开发 设为首页
加入收藏
联系我们
建站搜索: 常用广告代码   用户注册 | 用户登陆
您当前的位置:中国建站之家 -> 网站开发设计技术教程 -> JavaScript教程 -> 使用Javascript制作声音按钮的实例代码

使用Javascript制作声音按钮的实例代码

作者:未知  来源:本站整理  发布时间:2007-5-8 6:26:41  发布人:圈圈

减小字体 增大字体

文章简介:

  一般而言,网页中按钮是没有声音触发事件的。如果要让按钮响应鼠标动作发出声音,我们可以写一段JavaScript脚本代码来实现。

  能让按钮发出声音的脚本,这下不用制作Flash按钮也可以了,我试用的感觉还不错。

  制作方法:

  1、新建文件:

DynamicAudioButton.js ,代码:
//Customize Dynamic Audio Link 自定义动态声音链接
function DynamicAudioLink(){
    open("http://www.pcedu.com.cn")
}

//Customize Dynamic Audio Mouse Over Color 自定义动态声音mouseover颜色
function AudioOver() {
    document.Audio.button.style.background="#999999"
    document.Audio.button.style.color="white"
}

//Customize Dynamic Audio Mouse Down Color 自定义动态声音mousedown颜色
function AudioDown() {
    document.Audio.button.style.color="#cccccc"
}

//Customize Dynamic Audio Mouse Off Color 自定义动态声音mouseOff 颜色
function AudioOut() {
    document.Audio.button.style.background="#666666"
    document.Audio.button.style.color="#ffffff"
}

//Customize Dynamic Audio sound 自定义动态声音
function playHome() 
{
    document.all.sound.src = "bleep.wav";
}

document.write('<bgsound id="sound">')

//Customize Button Style 自定义按钮样式
document.write('<style type="text/css">'+'<!--')
document.write('.select{background:#666666;border-color:"#999999";color:"#ffffff";font-family:Arial,Helvetica,Verdana;font-size:10pt;font-weight: bold;}'+'-->'+'</STYLE>')

document.write('<center><form name=Audio><input class="select" name=button type="button" value="Dynamic Audio" onclick="DynamicAudioLink()" onMouseOver="AudioOver();playHome()" onMouseDown="AudioDown()" onMouseOut="AudioOut()"></form></center>')

  2、保存文件后,在页面相关处插入代码引用该JS文件:


<Script language="JavaScript" SRC="DynamicAudioButton.js"></script>

  3、选择好音乐文件,可以是wav、MP3等,音乐文件尽量小些。

  方法制作完成,用户可以使用图片等形式,当然也得修改 DynamicAudioButton.js 文件相应的代码。


将本文收藏到QQ书签与更多好友分享
[打 印]
[] [返回上一页] [收 藏]
∷相关文章评论∷    (评论内容只代表网友观点,与本站立场无关!) [更多评论...]
精彩推荐
热门文章
· 注册码大全二
· 注册码大全四
· 注册码大全一
· 要10G免费网络硬盘的请进..
· 通过google 赶快来赚美金..
· 注册码大全十
· 头像-qq头像(qq新头像)4..
· 让你轻松架设FTP服务器1..
· 注册码大全三
· 梦幻背景图片7
· 卡通动物图片6
· 网页制作素材-按钮素材2..
· 让你轻松架设FTP服务器5..
· 风景图片8
· 注册码大全九
· 让你轻松架设FTP服务器2..
关注此文读者还看过
· GooglePR值查询
· Dreamweaver制作网页的图..
· 奥运假票诈骗 三个犯罪嫌..
· 如何修改数据库表或存储..
· 知识搜索应运而生 引领..
· Visual Studio.NET FAQ(..
· 网恋交友研究报告出炉 五..
· PS实例教程:教你制作结婚..
· 飞机游戏(彩京类型《飞..
· 天极网密谋转型 进军无线..
· Dreamweaver MX中应用数..
· 微软在美国推出Office正..
· Xuite免费空间网提供500..
· WinForm中类似WebForm中..
· PCPOP首席执行官李想:希..
· JSP由浅入深(1)—— 熟悉..
相关文章
· 使用Java动态创建ODBC数据源..
· 使用Javascript评估用户输入..
· 使用Java来监视系统进..
· 基础入门:如何在你的HTML中..
· 使用JavaScript来实现浏览器..
· 在JSP中使用JavaMail
· 在ASP中使用Java类(Using J..
· 使用JavaScript创建智能表单..
· 手把手教你使用Java来编写A..
· 手把手教你使用Java来编写A..
· 手把手教你使用Java来编写A..
· 手把手教你使用Java来编写A..
· 手把手教你使用Java来编写A..
· 手把手教你使用Java来编写A..
· JSP学习笔记(五)----..
· 在JSP中使用JavaMail(二)
关于本站 - 网站帮助 - 广告合作 - 下载声明 - 友情连接 - 网站地图 - 人才招聘
网站合作、内容监督、商务咨询:QQ: 9576619
Copyright ? 2005--2008 中国建站之家版权所有
粤ICP备05092265号