使用Javascript製作聲音按鈕的執行個體代碼

來源:互聯網
上載者:User
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"    ></form></center>')

  2、儲存檔案後,在頁面相關處插入代碼引用該JS檔案:

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

  3、選擇好音樂檔案,可以是wav、MP3等,音樂檔案盡量小些。

  方法製作完成,使用者可以使用圖片等形式,當然也得修改 DynamicAudioButton.js 檔案相應的代碼。



相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.