My wife just asked me if I could create a web page just like one she saw on Mother Jones. Naturally, I said sure. The feature she wanted
is the ability to click on dots on a picture and get both text and audio info about the object under the yellow dot. Here's my example web page
for my wife. It could be made prettier, but this shows how to get the effect she wants. Take a look at the source code to see how I did it.
Since I used
JQuery in my last blog, I used JQuery again to change the src attribute of the audio source tag.
I added support for IE8; the only popular browser
that doesn't support the html5 audio tag. This required several other changes besides audio.
Return To My Blog Page
Return To My Program List
|
Click on a yellow dot for information. |
|
Information appears here when you click on a yellow dot |
Some technical notes: Microsoft changed the return value for navigator.appName in IE 11, from "Microsoft Internet Explorer" to "Netscape".
It's still possible to test for the browser type, but that isn't necessary here. IE 11 does a good job supporting html5, so it can use the same
code that I'm using for non-IE browsers. IE browsers previous to IE 11 can still see the IE conditional tag, so "<!--[if lt IE 9 ]><![endif]-->" can still be used
to create code that doesn't use html5. If you are using IE 11 (like I am) you'll see the html5 version of this page, but if you switch to compatability
mode you'll see the version written for IE 8 (html 4.01).
IE html5 audio supports mp3 files; some browsers don't. All non-IE browsers (at least the ones I tested this out on) support wav files. The solution
is the use of multiple sound files. html5 audio lets you use multiple audio files, and chooses the audio file that works in the browser it's loaded into. I'm
using two audio files for the html5 version of this web page; one mp3 file and one wav file. However, since the sound files are changed by clicking
on yellow dots, I have to tell the function that changes the sound files what "<source>" tag to change the audio file in. This is done by giving each
source file a unique id value. Take a look at the source code of this web page too see how I did this.
Of course, the html 4.01 version of this web page (the IE 8 version) doesn't use html5 audio, but uses the "<embed>" tag; once again, I'm using wav
files. For the html 4.01 version I had to paint the yellow dots onto the jpeg of Citron (using MS paint) and the "<map>" tag to make each yellow dot
clickable. The jukebox only plays the intro sound file (instructions on using the web page) so it didn't require the "<map>" tag; I just made the jukebox
image a link; i.e., embedded in an "<a>" tag.
