overLIB - Associating audio with overlibmws popups

Examples of Popups with Audio via the
overlibmws DHTML Popup Library

maintained by Foteos Macrides at Macrides Web Services
Discuss these examples, seek help, and offer suggestions
for audio support via the overlibmws Support Group.

These examples work best on broadband, but do work on dialup,
and not badly once the audio files are in cache.

I love my Harley. Meep me. Greek dances.

The first and second examples play short audio files while the user hovers over the link, whereas the third example plays a lengthy audio file with display of a STICKY popup.. Although these examples use audio files with novelty sounds or music, the procedures also can be used with audio files which "speak" the content of displayed DHTML popups, to increase their accessibility beyond the means disussed in the support document on keyboard-invoked popups.

Here is the relevant javascript code and HTML markup:

As a supplement to the overDiv positioned div for the visual display of popups, we declare an audioDiv positioned div for the concomittant audio presentations:

<div id="audioDiv" style="position:absolute; visibility:hidden;
   z-index:0;"></div>

It should be a direct child of the body (i.e., following the body start tag and not encased in any other container element).

We then include markup which helps to "pre-load" the lengthy .mp3 audio file and the image for the popup of the third example:

<div id="GreekDancesDiv" style="position:absolute; visibility:visible; z-index:0;

    top:0px; left:0px; width:1px; height:1px;">

    <script type="text/javascript">

    <!--

     document.write((!OLgek || OLgek>=20100101)?

      '<object'

     +' name="myGreekDances" id="myHarley"'

     +' width="1" height="1"'

     +' type="audio/mp3"'

     +' data="GreekDances01.mp3"'>

     +' <param name="hidden" value="true">'

     +' <param name="autostart" value="false">'

     +' <param name="loop" value="false">'

     +'<\/object>':

      '<embed'

     +' name="myGreekDances" id="myGreekDances"'

     +' width="1" height="1"'

     +' type="audio/mp3"'

     +' src="GreekDances01.mp3"'

     +' hidden="true"'

     +' autostart="false"'

     +' loop="false">'

     +'<\/embed>');

    //-->

    </script>

   </div>

<script type="text/javascript">

   //<!--

   dance = new Image();

   dance.src = "../image/dance.gif"

   //-->

   </script>

Then we use a "back door" strategy of also defining (via an imported .js file) the object elements (or embed elements for old versions of Firefox) as string variables, with new name and id strings so that they remain unique across elements in the document, and with the autostart attribute set to true:

var harl = (!OLgek || OLgek>=20100101)?

    '<object'

   +' name="theHarley" id="theHarley"'

   +' width="1" height="1"'

   +' type="audio/mp3"'

   +' data="HarleySound.mp3">'

   +' <param name="hidden" value="true">'

   +' <param name="autostart" value="true">'

   +' <param name="loop" value="false">

   +'<\/object>':

    '<embed'

   +' name="theHarley" id="theHarley"'

   +' width="1" height="1"'

   +' type="audio/mp3"'

   +' src="HarleySound.mp3"'

   +' hidden="true"'

   +' autostart="true"'

   +' loop="false">'

   +'<\/embed>';
   


   var meep = (!OLgek || OLgek>=20100101)?

    '<object'

   +' name="theMeepMeep" id="theMeepMeep"'

   +' width="1" height="1"'

   +' type="audio/mp3"'

   +' data="MeepMeep.mp3">'

   +' <param name="hidden" value="true">'

   +' <param name="autostart" value="true">'

   +' <param name="loop" value="false">

   +'<\/object>':

    '<embed'

   +' name="theMeepMeep" id="theMeepMeep"'

   +' width="1" height="1"'

   +' type="audio/mp3"'

   +' src="MeepMeep.mp3"'

   +' hidden="true"'

   +' autostart="true"'

   +' loop="false">'

   +'<\/embed>';
   


   var greekdan = (!OLgek || OLgek>=20100101)?

    '<object'

   +' name="theGreekDances" id="theGreekDances"'

   +' width="1" height="1"'

   +' type="audio/mp3"'

   +' data="GreekDances01.mp3">'

   +' <param name="hidden" value="true">'

   +' <param name="autostart" value="true">'

   +' <param name="loop" value="false">

   +'<\/object>':

    '<embed'

   +' name="theGreekDances" id="theGreekDances"'

   +' width="1" height="1"'

   +' type="audio/mp3"'

   +' src="GreekDances01.mp3"'

   +' hidden="true"'

   +' autostart="true"'

   +' loop="false">'

   +'<\/embed>';

so that we can play an audio file simply by loading the corresponding string variable as HTML into our audioDiv postioned div.

Now we can define a playIt() function which manipulates these strings and loads our audioDiv:

function playIt(whichsound) {

    if (OLloaded && OLgateOK && !OLns4) {

     var o = OLgetRef('audioDiv');

     if (o) {

      cClick();

      o.innerHTML = whichsound;

      o.style.visibility = 'visible';

     }

    }

    return false;

   }

It has a required first argument which is either the name of an embed string variable (in this document, for our .mp3 audio files).

We also define a stopIt() function:

function stopIt(){

    if (OLloaded && OLgateOK && !OLns4) {

     var o = OLgetRef('audioDiv');

     if (o) {

      o.innerHTML = '';

      o.style.visibility = 'hidden';

     }

    }

    return false;

   }

which we call onmouseout (together with an nd call) if the popup and audio were called onmouseover and the popup is not STICKY. For STICKY popups, which are closed via cClick calls, e.g., by the Close link in the CAPTION, we create a replacement which daisy-chains it to stopIt:

var cClickOld = cClick;
   


   function cClickNew() {

    if (OLloaded && OLgateOK){

     if (over && OLshowingsticky) stopIt();

     cClickOld();

    }

    return false;

   }
   


   cClick = cClickNew;

Note that we use the replacement cClick in the body start tag:

<body onunload="cClick();" onresize="cClick();">

to ensure that any audio associated with any open STICKY is terminated on leaving or resizing the current document. We still can simply minimize the current window and continue listening to the audio of a STICKY popup while working in another window.

If we had secondary popups with audio, we correspondingly would define and use an audioDiv2 positioned div, and a playIt2, a stopIt2, and a replacement cClick2 function to use in conjunction with overlib2 and nd2 calls.

We now are ready to make the calls for our popups with audio:

I love my <a

    href="javascript:void(0);"

    onmouseover="playIt(harl);

     return overlib('Keep your mouse on this link to keep hearing my '

     +'wonderful Harley Davidson motorcyle.&lt;br&gt;&lt;br&gt;'

     +'If you don\'t hear the sound or it is choppy, then the audio '

     +'file may still be loading, so hover over this link again later.',

     CAPTION,'I Love My Harley', CGCLASS,'olcg', CAPTIONFONTCLASS,'olcap',

     FGCLASS,'olfg', TEXTFONTCLASS,'oltxt12', BORDER,2, BGCOLOR,'#00ff00',

     WIDTH,210, BASE,3, HAUTO);"

    onmouseout="stopIt(); nd();">Harley</a>.

<a

    href="javascript:void(0);"

    onmouseover="playIt(meep);

     return overlib('What Fun!!!!',

     FGCLASS,'olfg', TEXTFONTCLASS,'oltxt16', BORDER,2, BGCOLOR,'#00ff00',

     WRAP, BASE,2, HAUTO);"

    onmouseout="stopIt(); nd();">MeepMeep</a> me.

Greek <a

    href="javascript:void(0);"

    onmouseover="playIt(geeekdan);

     return overlib('&lt;img '

     +'src=\'../image/dance.gif\' alt=\'\' width=\'107\' height=\'193\'&gt;',

     CAPTION,'Opa opa!!!', CGCLASS,'olcg', CAPTIONFONTCLASS,'olcap', STICKY, LABEL,'music',
 
     FGCLASS,'olfg', BORDER,3, BGCOLOR,'#00ff00', SCROLL, CLOSETEXT,'Stop', CLOSECLICK,

     CLOSESIZE,'14px', CLOSETITLE,'click to Stop da Music', WRAP, RELX,-10, RELY,10);">dances</a>.

Use your browser's View Source option to see the
javascript code, HTML markup, and CSS rules directly.