Alternate play / pause button for WordPress wpaudio soundmanager plugin

Question

Hello!

I am using the wpaudio plugin to convert mp3 links into a javascript/flash audio player. My problem is that I use this plugin in two areas on my site: one on a black background, and one on a white background. I need to use an alternate set of play/pause buttons for each page (white buttons for the black background and vice versa). I am at a total loss on how to do this.

I need to some how incorporate a "if page is..." statement into the wpaudio.js but I don't know how to do this with jQuery.

Here is the code in the plugin i think i need to alter:

jQuery(this).prepend('<img id="wpa' + wpa_id + '_play" class="wpa_play" src="' + wpa_url + '/wpa_play.gif">');

and:

function wpaButtonCheck() {
    if (!this.playState || this.paused)
        jQuery('#' + this.sID + '_play').attr('src', wpa_url + '/wpa_play.gif');
    else
        jQuery('#' + this.sID + '_play').attr('src', wpa_url + '/wpa_pause.gif');
}

the plugin adds the element to the DOM in the following format:

<img src="http://24.232.185.173/wordpress/wp-content/plugins/wpaudio-mp3-player/wpa_play.gif" class="wpa_play" id="wpa0_play">

Answer 1

Ok i get it now.

What you need to do is instead of setting the src attribute for showing the correct image. Have both type of images in the same image. for example instead of wpa_play.gif you will have a bigger one which contains wpa_play for back bg and white bg both. but the size of its container is only the size of one of the buttons.

then you use the backgound-position in the css on different pages to show the correct part of the button