Javascript制作声音按钮的代码

一般而言,网页中按钮是没有声音触发事件的。如果要让按钮响应鼠标动作发出声音,我们可以写一段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="Audio
Down()" onMouseOut="AudioOut()"></form></center>')
   2、保存文件后,在页面相关处插入代码引用该JS文件:

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

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

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

时间: 2024-09-11 16:37:16

Javascript制作声音按钮的代码的相关文章

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

javascript|按钮 文章简介: 一般而言,网页中按钮是没有声音触发事件的.如果要让按钮响应鼠标动作发出声音,我们可以写一段JavaScript脚本代码来实现. 能让按钮发出声音的脚本,这下不用制作Flash按钮也可以了,我试用的感觉还不错. 制作方法: 1.新建文件: DynamicAudioButton.js ,代码: //Customize Dynamic Audio Link 自定义动态声音链接 function DynamicAudioLink(){     open("http

使用Javascript制作声音按钮文章简介:

javascript|按钮 文章简介:     一般而言,网页中按钮是没有声音触发事件的.如果要让按钮响应鼠标动作发出声音,我们可以写一段javascript脚本代码来实现. 能让按钮发出声音的脚本,这下不用制作flash按钮也可以了,我试用的感觉还不错. 制作方法: 1.新建文件: DynamicAudioButton.js ,代码://Customize Dynamic Audio Link 自定义动态声音链接function DynamicAudioLink(){    open("htt

使用Javascript制作声音按钮

javascript|按钮 能让按钮发出声音的脚本,这下不用制作flash按钮也可以了,我试用的感觉还不错. 制作方法: 1.新建文件:DynamicAudioButton.js ,代码: //Customize Dynamic Audio Link 自定义动态声音链接function DynamicAudioLink(){open("http://www.webjx.com/")} //Customize Dynamic Audio Mouse Over Color 自定义动态声音m

基于javascript制作经典传统的拼图游戏_javascript技巧

本文实例为大家分享了javascript制作经典传统的拼图游戏的关键代码,供大家参考,具体内容如下 效果图: 拼出你喜欢的白雪公主和七个小矮人 实现代码: <!DOCTYPE html> <html> <head> <title>pingtu.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

JavaScript制作简单的日历效果_javascript技巧

本文实例为大家分享了 <!DOCTYPE html> <html> <head> <meta charset="gb2312"> <title></title> </head> <body> <script> document.write("<table>"); document.write("<th colspan='7'>

javascript数字验证的实例代码(推荐)_javascript技巧

现在有一个需求如下图: 产品经理说Card Number只能让输入数字(中间的空格是格式自加的,也是用js实现的),有时候我脑海中出现了个声音,啥玩意,加个type=number不就行了,事实发现图样图森破了,先不说type=number后面会有个上下标(虽然用css可干掉),但是这个类型是支持科学输入法的,就是小数点和e这样的是可以输入的,于是乎只能用其他的方式了,后来想用检索到输入了非数字就干掉,但是这样还是能输入,想法被打回,于是乎最终采用了键盘输入控制的办法,其实很简单, 代码如下: v

JavaScript制作弹出层效果_javascript技巧

先给大家展示下效果图,效果图如下所示: 1.引用相关easyui.min.js,easyui-lang-zh_CN.js 等js 文件: 2.前台代码 <input type="text" id="txt_Type" style="display:none" /> <div class="macFormItem" id="divSQXLH" runat="server"

javascript制作幻灯片(360度全景图片)_表单特效

在给客户做产品演示时经常会用到幻灯片,拥有360度的全景图片效果给用户带来好的体验价值.在这里给大家介绍一款来自Robert Pataki的360全景幻灯实现教程,此款教程使用js来实现一个超酷的全景幻灯,具体内容如下: 在这个教程中没有使用到任何插件,我们将使用HTML,css和javascript来实现,当然,也使用是jQuery这个框架! 如何实现? 我们将使用预先按照360生成的图片进行轮播来实现动画展示效果.包含了180个图片.所以加载时间可能比较长. 代码实现 我们将在css代码中添

BootStrap制作导航条实例代码_javascript技巧

什么是 Bootstrap? Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的. bootstrap 导航条摸索了好久,要不就是左边和右边不会水平对齐,要不就是颜色不一样,菜鸟最后终于搞定,直接把代码放这里,以后直接用 代码如下所示: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=&