How can I make different images display when this element is toggled, rather than text

Question

I'm working on a project that already has most of the work completed. I would just like to change this element to display images instead of the text "Pause Audio" and "Continue Audio".

Thanks in advance.

var player = new MediaElementPlayer('audio', {
    audioWidth: 0,
    features: [], 
    success: function (mediaElement, domObject) {}
});

var audioOn = true;
    var audioSrc = '';
    function playSoundClip(path)
    {
        player.pause();
        audioSrc = path;
        player.setSrc(audioSrc);        
        if (audioOn)
        {
            player.play();
        }
    }
    function audioToggle(toggleAnchor)
{
    if (audioOn)
    {
        player.pause();
        audioOn = false;
        $(toggleAnchor).html('**Continue Audio**');
    }
    else
    {
        audioOn = true;
        $(toggleAnchor).html('**Pause Audio'**);
        if (audioSrc.length > 0)
        {
            player.play();
        }
    }
}

Answer 1

只需将<img> html放入.html（）函数中即可。

$(toggleAnchor).html('<img src="my/img/src.jpg">');

Answer 2

You should add the images into the HTML document first , so the user doesn't constantly request the same image from the host. This helps reduce bandwidth usage, and also stops image flickering (when a new image is loaded). For example (contained in the element):

<img src="img/blah" id="img1" style="display:none;">
<img src="img/blah" id="img2" style="display:inline;">

Then merely toggle their display attribute. This could also be done using Jquery's hide() and show() (if desired). Below is an example toggle function:

function toggle(){
    if ($('img1').css('display') == 'none') {
        $('img1').css('display') = 'inline';
        $('img2').css('display') = 'none';
    }
    else {
        $('img1').css('display') = 'none';
        $('img2').css('display') = 'inline';
    }
}