Created
June 19, 2012 12:34
-
-
Save gbelote/2953886 to your computer and use it in GitHub Desktop.
HTML Example for Dave
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <title>Whatever Title You Want</title> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> | |
| <script> | |
| // wait until the page is ready (i.e. loaded) before binding events | |
| $(function() { | |
| // whenever someone clicks on an <area> element... | |
| $('area').click(function(e) { | |
| // $(this) returns the clicked element, .data('audio') pulls the "data-audio" attribute | |
| var audio_selector = $(this).data('audio'); | |
| // using the selector, find the connected <audio> element | |
| var audio = $( audio_selector ); | |
| // grab the raw HTML element | |
| var raw = audio.get(0); | |
| // play the audio file (if exists)! | |
| if( raw ) { | |
| raw.play(); | |
| } | |
| }); | |
| }); | |
| </script> | |
| </head> | |
| <body> | |
| <img name="0.1_shortmessages" src="http://shortmessages.png" width="541" height="999" border="0" usemap="#0.1_m_shortmessages" alt=""/> | |
| <map name="0.1_m_shortmessages"> | |
| <area shape="rect" coords="280,324,470,388" data-audio="#fantastic" href="#" alt=""/> | |
| <area shape="rect" coords="280,414,470,478" data-audio="#count" href="#" alt=""/> | |
| <!-- ... add more areas ... --> | |
| </map> | |
| <audio id="fantastic" src="http://recordings_dora/iphone_short_fantastic.mp3"></audio> | |
| <audio id="count" src="http://recordings_dora/iphone_short_count.mp3"></audio> | |
| <!-- ... add more audios ... --> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment