JavaScript to swap an img for an swf, need help...

Question

Heya,
So I have an mp3 player that is generated dynamically, it
displays a compact play button beside each song an artist has
published. But what happens on the high content pages is the flash
just jams the browser. So I want to show an image to start, then,
when it's clicked, I want it to swap out the swf file, can anyone
help me out?
I'm confident I should be able to write it myself I am just
unsure of the proper syntax to use when writing it. I figure it
will look something like this...
When the page
loads {
display this image
but when it's
clicked swap it out with {
this swf
}

Answer 1

Sorry for the delayed response, I work with two other
programmers so often times they're not available to give input at
the time I post in here. Anyway, one of the other programmers
solved the problem. Here was the conclusion...
// Display functions: to be used in partials and bodies
function ocp_audio_player($uri, $compact = false, $return =
false) {
$player_path = $compact ? '/flash/compact_mp3_player.swf' :
'/flash/regular_mp3_player.swf';
$width = $compact ? '17' : '120';
$autostart = $compact ? 'true' : 'false';
$uri_for_player = $compact ? "' + uri + '" : $uri;
$player = <<<QQQ
<object width="{$width}" height="18"
classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="
http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0">
<param name="movie" value="{$player_path}" />
<param name="bgcolor" value="#fff" />
<param name="menu" value="false" />
<param name="quality" value="medium" />
<param name="flashvars"
value="file={$uri_for_player}&autostart={$autostart}&shuffle=false&shownavigation=false&d isplayheight=0&showicons=false&autoscroll=true&repeat=list"
/>
<embed src="{$player_path}" bgcolor="#ffffff"
menu="false" quality="medium" type="application/x-shockwave-flash"
pluginspage="
http://www.macromedia.com/go/getflashplayer"
height="19" width="{$width}"
flashvars="file={$uri_for_player}&autostart={$autostart}&shuffle=false&shownavigation=fal se&displayheight=0&showicons=false&autoscroll=true&repeat=list"
/>
</object>
QQQ;
if ($compact) {
$GLOBALS['player_counter'] =
isset($GLOBALS['player_counter'])
? $GLOBALS['player_counter'] + 1
: 0;
$player = str_replace("\t", "", $player);
$player = str_replace("\n", "", $player);
if(!$GLOBALS['audio_functions_displayed']) {
$GLOBALS['audio_functions_displayed'] = true;
$functions = <<<QQQ
<script type="text/javascript">
function activateAudioPlayer(id, uri) {
var player = '{$player}';
var playerImg = '<img
src="/ocpimages/compact_mp3_player.png" height="19"
onclick=\'activateAudioPlayer($("..", this).attr("id"), $("..",
this).attr("audio_uri"));\' />';
$('.compactAudioPlayer').empty().append(playerImg);
$('#' + id).empty().append(player);
</script>
QQQ;
$player = "{$functions}<div class=\"compactAudioPlayer\"
id=\"compactAudioPlayer{$GLOBALS['player_counter']}\"
audio_uri=\"{$uri}\" style=\"height: 19px;\"><img
src='/ocpimages/compact_mp3_player.png' height=\"19\"
onclick='activateAudioPlayer($(\"..\", this).attr(\"id\"),
$(\"..\", this).attr(\"audio_uri\"));'></div>";
if ($return) {
return $player;
} else {
print $player;
}