HTML 5程序員之路:網(wǎng)頁圖像映射與背景音樂

圖像映射與頁面背景音樂

object標簽:

定義一個嵌入的對象状飞。請使用此元素向您的 XHTML 頁面添加多媒體骨宠。此元素運行您規(guī)定插入 HTML 文檔中的對象的數(shù)據(jù)和參數(shù)贴届,以及可用來顯示和操作數(shù)據(jù)的代碼。
當(dāng)使用那些瀏覽器不支持的鏈接插入標簽可用object做替代文本。

一般我們在網(wǎng)頁上面放一張地圖性質(zhì)的圖片時康震,在圖片上的地點放幾個鏈接點,對地名做介紹宾濒,或鏈接到與其有關(guān)的網(wǎng)頁腿短。

img中的alt標記為替代文本,防止前一個文本沒用時作備用

usemap:

規(guī)定與對象使用的圖像映射的名稱绘梦。圖像映射是帶有可點擊區(qū)域的圖 也可以與object搭配使用橘忱,通俗點說就是把一張圖片的莫一個區(qū)域當(dāng)作是鏈接,可以鏈接網(wǎng)站卸奉,路徑等钝诚。。榄棵。

shape :

定義映射區(qū)域的形狀 rect(矩形)circle(圓形)poly(多邊形)

cords:

設(shè)置可以點擊的區(qū)域的坐標凝颇,屬性值單位為像素。
如果shape="rect"疹鳄,cords屬性值分別是矩形的左拧略,上,右瘪弓,下四條邊的坐標垫蛆。
如果shape='circle",cords屬性指分別是圓形的圓形坐標和半徑腺怯。
如果shape="poly" 袱饭,cords屬性分別是多邊形的各個頂點的坐標。

   <img src="369.png" usemap="#map1" alt="地圖" title="華東交通大學(xué)"/><br/>
   <p> 1</p>
   <p> 2</p>
   <p> 3</p>
      <p>4 </p>

   <map name="map1">
     <area shape="rect" coords="80,75,100,100"    
        alt="建設(shè)銀行" title="建設(shè)銀行" target="_blank">
     <area shape="circle" coords="97,116,7" 
         alt="五谷漁粉" title="五谷漁粉" 
         target="_blank">
     <area shape="circle" coords="240,34,7" 
            alt="正港
          大雞排" title="正港大雞排" target="_blank">
     <area shape="rect" coords="3,284,40,300"  
          alt="圖書館" title="圖書館" target="_blank" >
   </map>

audio :

HTML 5 的新標簽呛占,定義聲音虑乖,比如音樂或其他音頻流。
HTML5 Audio標簽?zāi)軌蛑С?strong>wav, mp3, ogg, acc, webm等格式

常備屬性

autopsy 音樂在網(wǎng)頁就緒后自動播放
controls 是否顯示出控制插件
preload 音頻在頁面進行加載的時候進行加載晾虑,并預(yù)備播放
source 允許您規(guī)定可替換的視頻/音頻文件供瀏覽器根據(jù)它對媒體類型或者編解碼器的支持進行選擇

顯示音樂控件代碼:

<audio autoplay="autoplay" controls="controls"loop="loop" preload="auto"
            src="Shawn Mendes - Imagination.mp3">
      </audio>

隱藏音樂控件:

<audio autoplay="autoplay">
<source src="Shawn Mendes - Imagination.mp3" type="audio/mpeg">
</audio>

還有其他幾種不常見 的方法

1:

使用比較老的辦法 使用bgsound標簽插入音頻疹味,不過這種只適合IE瀏覽器

<body>

<bgsound src="Shawn Mendes - Imagination.mp3">
</body>

2:

插入一個flash播放器,然后播放相應(yīng)的音樂走贪。不推薦這種方法佛猛,因為flash已經(jīng)沒前途了惑芭,現(xiàn)在的手機幾乎都不直接支持flash坠狡。

3

使用embed標記,不僅可以用于插入音頻遂跟,還可以用于插入flash逃沿,視頻等多種多媒體對象婴渡。

<embed src="Shawn Mendes - Imagination.mp3" width="300" height="30"
autostart="true" loop="true">

width 為播放器的寬 height為高
autostart為自動播放屬性, true則為自動播放凯亮,false為手動播放
loop為循環(huán)屬性边臼,true為無限循環(huán),為正整數(shù)是循環(huán)次數(shù)假消,false為不循環(huán)柠并。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市富拗,隨后出現(xiàn)的幾起案子臼予,更是在濱河造成了極大的恐慌,老刑警劉巖啃沪,帶你破解...
    沈念sama閱讀 217,657評論 6 505
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件粘拾,死亡現(xiàn)場離奇詭異,居然都是意外死亡创千,警方通過查閱死者的電腦和手機缰雇,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,889評論 3 394
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來追驴,“玉大人械哟,你說我怎么就攤上這事〉钛” “怎么了戒良?”我有些...
    開封第一講書人閱讀 164,057評論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長冠摄。 經(jīng)常有香客問我糯崎,道長,這世上最難降的妖魔是什么河泳? 我笑而不...
    開封第一講書人閱讀 58,509評論 1 293
  • 正文 為了忘掉前任沃呢,我火速辦了婚禮,結(jié)果婚禮上拆挥,老公的妹妹穿的比我還像新娘薄霜。我一直安慰自己,他們只是感情好纸兔,可當(dāng)我...
    茶點故事閱讀 67,562評論 6 392
  • 文/花漫 我一把揭開白布惰瓜。 她就那樣靜靜地躺著,像睡著了一般汉矿。 火紅的嫁衣襯著肌膚如雪崎坊。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,443評論 1 302
  • 那天洲拇,我揣著相機與錄音奈揍,去河邊找鬼曲尸。 笑死,一個胖子當(dāng)著我的面吹牛男翰,可吹牛的內(nèi)容都是我干的另患。 我是一名探鬼主播,決...
    沈念sama閱讀 40,251評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼蛾绎,長吁一口氣:“原來是場噩夢啊……” “哼昆箕!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起租冠,我...
    開封第一講書人閱讀 39,129評論 0 276
  • 序言:老撾萬榮一對情侶失蹤为严,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后肺稀,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體第股,經(jīng)...
    沈念sama閱讀 45,561評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,779評論 3 335
  • 正文 我和宋清朗相戀三年话原,在試婚紗的時候發(fā)現(xiàn)自己被綠了夕吻。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,902評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡繁仁,死狀恐怖涉馅,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情黄虱,我是刑警寧澤稚矿,帶...
    沈念sama閱讀 35,621評論 5 345
  • 正文 年R本政府宣布,位于F島的核電站捻浦,受9級特大地震影響晤揣,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜朱灿,卻給世界環(huán)境...
    茶點故事閱讀 41,220評論 3 328
  • 文/蒙蒙 一昧识、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧盗扒,春花似錦跪楞、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,838評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至褥影,卻和暖如春池户,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,971評論 1 269
  • 我被黑心中介騙來泰國打工煞檩, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人栅贴。 一個月前我還...
    沈念sama閱讀 48,025評論 2 370
  • 正文 我出身青樓斟湃,卻偏偏與公主長得像,于是被迫代替她去往敵國和親檐薯。 傳聞我的和親對象是個殘疾皇子凝赛,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,843評論 2 354

推薦閱讀更多精彩內(nèi)容

  • HTML標簽解釋大全 一、HTML標記 標簽:!DOCTYPE 說明:指定了 HTML 文檔遵循的文檔類型定義(D...
    米塔塔閱讀 3,242評論 1 41
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,116評論 25 707
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理坛缕,服務(wù)發(fā)現(xiàn)墓猎,斷路器,智...
    卡卡羅2017閱讀 134,656評論 18 139
  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫赚楚、插件毙沾、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 12,103評論 4 62
  • 前幾天在厚樸中醫(yī)學(xué)堂購買的艾條到了,連續(xù)幾天下大雨宠页,于是一直放在單位左胞,今天才拿回家。這是直徑18mm的艾條举户,比以前...
    如心1976閱讀 254評論 3 1