努力したWiki

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

ユーザ用ツール

サイト用ツール


documents:web:web-001

画像クリックで音声再生

説明

  • 右目、左目にクリッカブルマップで領域を設定し、音声再生。
  • 試したブラウザは 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="https://wiki.hgotoh.jp/_media/documents/web/right_eye.wav" preload="auto" id="sound1"/>
      </area>
      <area shape="rect" coords="200,200,250,250" id="left_eye">
        <audio src="https://wiki.hgotoh.jp/_media/documents/web/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/web/web-001.txt · 最終更新: 2023/04/27 13:56 by k896951

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki