努力したWiki

推敲の足りないメモ書き多数

ユーザ用ツール

サイト用ツール


サイドバー

メニュー

インデックス

documents:other:other-998

画像クリックで音声再生

HTML5, クリッカブルマップ, Audioタグ

説明

  • 試したブラウザは Firefox と Edge。IEは試していない。
  • 先頭のdoctypeは必須。これでHTML5だとブラウザに宣言するから。
  • クリッカブルマップで指定した領域とaudioタグで指定した音声ファイルの再生を繋ぐものが無いので javascriptで仲介してます。
  • メソッドaddEventListener()はIEだとattachEvent()になるかも。
  • audioタグの位置はここでなくてもいい。例ではどのareaタグと結びつくか明示したかったからこの配置。
  • 画像は民安ともえ(たみやすともえ)さんのツイッターのアイコン画像から。

<!doctype html>
<html>
  <body>
    <img src="https://pbs.twimg.com/profile_images/914475634646171649/M-dN3YON_400x400.jpg" usemap="#tammy"/>
    <map name="tammy">
      <area shape="rect" coords="150,100,200,200" id="right_eye">
        <audio src="right_eye.wav" preload="auto" id="sound1"/>
      </area>
      <area shape="rect" coords="200,200,250,250" id="left_eye">
        <audio src="left_eye.wav" preload="auto" id="sound2"/>
      </area>
    </map>
    <script>
    document.getElementById('right_eye').addEventListener('click',function(e){ document.getElementById('sound1').play(); });
    document.getElementById('left_eye').addEventListener('click',function(e){  document.getElementById('sound2').play(); });
    </script>
  </body>
</html>

実行してみる

documents/other/other-998.txt · 最終更新: 2018/09/19 11:13 by k896951

ページ用ツール