Hello,

 

I have two questions:

 

1) Is there any universal way (for all browsers) of using JavaScript to play some sound when you mouse over some link? If yes can somebody link me to this code or at least write me how one would do this?

 

2) Is there a way to define if images are off in browser using some script or HTML?

 

Thanks!

I used javascript to play a "ding-dong" or my own voice commenting on the link when a mouse went over a link, but removed it as I thought it was a bit naff.

 

The code is in several parts; the link was

<div class="horizpopup" style="float: left;">

<a href="../jakarta/jakarta.html" title="Jakarta"><img src="../images/square_j.jpg" alt=""/><span>Jakarta - my leaving party<br/><img src="../jakarta_photos/office_lunch.jpg" title="Jakarta" alt="Jakarta"/></span></a>

 

but ignore all the popup stuff which was for a mouseover image, it's only the title="..." which is used by the javascript.

 

At the bottom of the html file, just before the </body> tag

<script type='text/javascript' src='../playmedia.js'> </script>

<script type='text/javascript'>

 

SCmediaPath="";

SCmediaDelay=300;

 

SCmediaSetup( "Clifton", "../sounds/im.wav", "Jakarta", "../sounds/jakarta.wav", "Falklands", "../sounds/falklands.wav", "Basketmakers", "../sounds/type.wav" );

 

</script>

 

<!--for preloading sound-->

<div style="height: 0; line-height: 0; font-size: 0; padding: 0; margin: 0;">

<embed src="../sounds/im.wav" hidden="true"autostart="false"></embed>

<embed src="../sounds/jakarta.wav" hidden="true" autostart="false"></embed>

<embed src="../sounds/falklands.wav" hidden="true" autostart="false"></embed>

<embed src="../sounds/type.wav" hidden="true" autostart="false"></embed>

</div>

 

and the playmedia.js file

 

/*
* (C)2006 Stephen Chalmers  
*
* This notice must not be removed 
*
* Plays media files on hover to provide gratuitous 
* sound effects or talking tooltips.
*
*/


/*** These instructions may be removed ***


Installation and Configuration
==============================

SAVE THIS TEXT/DOCUMENT AS: playmedia.js 

All the links that will play media files must be given a 'title'
attribute, e.g.

<A href='/content/index.htm' title='Contents Page'>Contents</A>

There is no need to insert 'onmouseover' parameters to the links.

At any point in the HTML file /below/ the last link, insert the
following code. Note: If playmedia.js is located in a different
folder, specify a relative path.


<script type='text/javascript' src='playmedia.js'> </SCRIPT>


<script type='text/javascript'>

SCmediaPath="";
SCmediaDelay=300;

SCmediaSetup( "title1", "file1.wav", 
             "title2", "file2.wav",
              ........ );

</SCRIPT>

The parameters passed to SCmediaSetup() above must be substituted
with your own, as explained below.

Example.

You have three links whose titles are: "Products", "Ordering", and 
"Site Map" and you want to assign them the sound files: 'newprod.wav',
'ordering.wav', and 'map.wav' respectively.

SCmediaSetup( "new products", "newprod.wav", 
             "ordering", "ordering.wav", 
             "site map", "map.wav" );

Notes
=====
Not all the links in the document need be involved in playing sounds.

Title / Filename parameter pairs need not be passed in the order in
which the links appear in the document.

The title specified for each link need not be its full title, a unique
substring is sufficient, provided that it does not appear within the
title of a different link. Thus the example above could have been written:

SCmediaSetup( "new p", "newprod.wav", 
             "ord", "ordering.wav", 
             "map", "map.wav" );

This feature makes it very easy to configure all links to play the
same file (if you must), by specifying a single character common to
the titles of all the links.              
For instance, if all link titles end with a period (.), the 
following statement makes all links play 'blip.wav':              

SCmediaSetup( ".", "blip.wav");

Paths
=====
If the sound files are located all together in a different folder, 
specify a /relative/ path in the SCmediaPath variable, otherwise leave it unchanged.

For example, if the files are in a parallel folder called 'media', specify:

SCmediaPath="../media/";

Alternatively, paths may be specified as a part of each filename parameter.

Timeout
=======  
To prevent premature triggering, there is a default timeout of 400 
milliseconds between mouseover and the instruction to play a file. 
The overall delay is dependent upon the particular plugin used.
If the mouse cursor is removed before the timeout expires, the file
is not played. 

Mute
====
To allow users to disable sound, place the following link anywhere
in your HTML.

<a href='#' onclick="toggleMediaPlay();return false">Sound Mute</a>

Additionally, one could assign the link a title and have it play a wav
file that says 'mute'.

Operation
=========
No media elements are created on startup, therefore when a link is
hovered for the first time, there may be a short delay while the media
plugin loads. This can be obviated by including a hidden embed tag like:

<embed src='somefile.wav' hidden='true' autostart='false' width='0' height='0' hidden='true'> ,

however loading of the document will be commensurately delayed.

If a media-playing link loads a new document in the current frame/
window, and the link is clicked immediately, there may not be time to
play the file entirely or at all, as the script will be dismissed 
when the new page loads.

This script is not coded to work in conjunction with other mouseover
scripts operating on the same links.

******** DO NOT EDIT BELOW THIS LINE ************/  

function SCmediaPlay(soundFile)
{
this.soundFile=soundFile;
this.objRef=null;
this.canPlay=true;
this.tm=null;
this.buffer=null;
this.preLoad();
}

SCmediaPlay.prototype.playSound=function()
{
 if(this.canPlay)
 {
  if(this.objRef!=null)
   {
    document.body.removeChild(this.objRef);
    this.objRef=null;
   }

  if( (this.objRef=document.createElement('embed'))==null )
    window.status="ERROR - Element not created: ["+(typeof this.objRef)+"]";
  else 
   {
    this.objRef.setAttribute("width","0");
    this.objRef.setAttribute("height","0");
    this.objRef.setAttribute("hidden","true");
    this.objRef.setAttribute("src", this.soundFile);

    document.body.appendChild(this.objRef); 
   }
 }
}

SCmediaPlay.prototype.preLoad=function()  
{                                         
this.buffer=new Image().src=this.soundFile;
}

String.prototype.contains=function(substr)
{
return new RegExp(substr,"i").test(this);
}

var SCmediaPath="", SCobjTable=[];

function SCmediaSetup()
{
if(document.body && document.body.appendChild)
{
 for(var i=0; i<arguments.length; i+=2)	
  for(var j=0, ll=document.links.length; j<ll; j++) 
   if( document.links[j].title.contains( arguments[i] ) )
   { 
    var idx = SCobjTable.length
    SCobjTable[ idx ] = new SCmediaPlay( SCmediaPath+arguments[ i+1 ] )
    document.links[ j ].onmouseover=new Function("SCobjTable["+idx+
    "].tm=setTimeout('SCobjTable["+idx+"].playSound()', 300)");
    document.links[ j ].onmouseout=new Function("clearTimeout(SCobjTable["+
    idx+"].tm);if(SCobjTable["+idx+"].objRef){document.body.removeChild(SCobjTable["+
    idx+"].objRef);SCobjTable["+idx+"].objRef=null;}") ;  
   }
}  
}

function toggleMediaPlay()
{
for(var i=0; i<SCobjTable.length; i++)
 SCobjTable[i].canPlay^=true;	 
}

 

but I expect the code is rather old-fashioned now, there may be better ways.