I used a wonderful resource at oreillynet to grab a pretty nice script to open up mp2's in a little .js pop up window. I'm just having a little issue trying to get the link color to change. I see where the code is and have tried several reditions. Just not accomplishing getting the link customized to match rest of site.

Here is site for example test audio pop up

Only first audio link "All Right" is working right now to test...

disclaimer: I know the site is graphic heavy and not perfect by any means, but i'm learning here :0)

Down the line i would like to actually get rid of the fact that this opens the default player for system and actually really have more control over look and feel, but this will work for now.

This is the external file as a .js

// Pop-Up Embedder Script by David Battino, www.batmosphere.com
// Version 2006-05-31  
// OK to use if this notice is included
   
function BatmoAudioPop(filedesc,filepath,WindowNumber) 
{

// Get Operating System 
var isWin = navigator.userAgent.toLowerCase().indexOf("windows") != -1
if (isWin) {
    // Use MIME type = "application/x-mplayer2";
	visitorOS="Windows";
} else {
    // Use MIME type = "audio/mpeg"; // or audio/x-wav or audio/x-ms-wma, etc.
	visitorOS="Other";
}

// Get the MIME type of the audio file from its extension (for non-Windows browsers)
var mimeType = "audio/mpeg"; // assume MP3/M3U
var objTypeTag = "application/x-mplayer2"; // The Windows MIME type to load the WMP plug-in in Firefox, etc.

var theExtension = filepath.substr(filepath.lastIndexOf('.')+1, 3); // truncates .aiff to aif
if (theExtension.toLowerCase() == "wav") { mimeType = "audio/x-wav"};
if (theExtension.toLowerCase() == "aif") { mimeType = "audio/x-aiff"}; 
if (theExtension.toLowerCase() == "wma") { mimeType = "audio/x-ms-wma"};
if (theExtension.toLowerCase() == "mid") { mimeType = "audio/mid"};
// Add additional MIME types as desired

if (visitorOS != "Windows") { 
objTypeTag = mimeType; // audio/mpeg, audio/x-wav, audio/x-ms-wma, etc.
};

    PlayerWin = window.open('',WindowNumber,'width=320,height=217,top=0, left=0,screenX=0,screenY=0,resizable=0,scrollbars=0,titlebar=0,toolbar=0,menubar=0,status=0,directories=0');

    PlayerWin.focus();
    PlayerWin.document.writeln("<html><head><title>" + filedesc + "</title></head>");
    PlayerWin.document.writeln("<body bgcolor='#333333'; text='#FFFFFF'; font-family='verdana, geneva, san-serif'; 			 background='images/player_background.jpg'>"); // specify background img if desired
    PlayerWin.document.writeln("<div align='center'>");
    PlayerWin.document.writeln("<b style ='font-size:14px;font-family:verdana, geneva, san-serif;line-height:1.6;background:#333333'>" + filedesc + "</b><br />");
    PlayerWin.document.writeln("<object width='280' height='69'>");
    PlayerWin.document.writeln("<param name='src' value='" +  filepath + "'>");
    PlayerWin.document.writeln("<param name='type' value='" + objTypeTag + "'>");
    PlayerWin.document.writeln("<param name='autostart' value='1'>");
    PlayerWin.document.writeln("<param name='showcontrols' value='1'>"); 
    PlayerWin.document.writeln("<param name='showstatusbar' value='1'>");
    PlayerWin.document.writeln("<embed src ='" + filepath + "' type='" + objTypeTag + "' autoplay='true' width='280' height='69' controller='1' showstatusbar='1' bgcolor='#7e7243' kioskmode='true'>");
    PlayerWin.document.writeln("</embed></object></div>");
    PlayerWin.document.writeln("<p style='font-size:12px;color:#FFFFFF;  font-family:Verdana, Geneva, sans-serif; text-align:center'><a href='" + filepath +"'>download</a> <span style='font-size:10px'>(right-click or Control-click)</span></p>");
    PlayerWin.document.writeln("<form><div align='center'><input type='button' value='close' onclick='javascript:window.close();'></div></form>");
    PlayerWin.document.writeln("</body></html>");

    PlayerWin.document.close(); // "Finalizes" new window
}

Highlighted in red is link area, not sure what to put in to get change from default link color and hover instances.

TIA - Johnny

Use css with the following example:

<style type="text/css">
<!--
a:link.mp3 {
color:YourColorHere;
text-decoration:underline;
font-weight:bold;
font-size:12px;
}
a:active.mp3 {
color:YourColorHere;
text-decoration:underline;
font-weight:bold;
font-size:12px;
}
a:visited.mp3 {
color:#YourColorHere;
text-decoration:underline;
font-weight:bold;
font-size:12px;
}
a:hover.mp3 {
color:white;
background-color:YourColorHere;
text-decoration:underline;
font-weight:bold;
font-size:12px;
}
-->
</style>

Change appropriate params above, ie, text-decoration, font-weight, font-size, etc.

Then call your js with a link like
<a class="mp3" href="javascript:YourJSName">NameofLink</a>

Good luck,
cmc:)

This article has been dead for over six months. Start a new discussion instead.