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