How to Add a Rollover Image to "play" & "mute" for an Audio Tag

**KennyP** · 03-21-2016, 07:30 AM

The following code works well to shut music on and off using two images for HTML5 audio.

Would you please show me how to add a rollover image to "music-on.png" and another

rollover image to "music-off.png" in the following script?

Thanks

head:

Code:

<script>
$(function() {
    $("#mute").click(function(e) {
        e.preventDefault();

        var song = $('audio')[0]
        if (song.paused){
            song.play();
            document.getElementById("mute").src = "images/music-off.png";
        }else{
            song.pause();
            document.getElementById("mute").src = "images/music-on.png";
        }
        });
});
</script>

body:

Code:

<audio id="audio" preload="auto" tabindex="0" type="audio/mpeg">
</audio>
<div class="style1">
 <a href="#" >
        <img id="mute" src="images/music-off.png" class="style2"/>
    </a>
</div>

**Beverleyh** · 03-21-2016, 01:54 PM

You can do JS mouseover image changes like this;

Code:

<img src="img.png" onmouseover="this.src='img-hover.png';" onmouseout="this.src='img.png';"></img>

**KennyP** · 03-21-2016, 02:38 PM

Hi Beverley:

Thank you for your reply. That code does work partially, but when the music is off it displays the

same image as when the music is on. I'd like for play and stop have their own hover image.

Test Page.

Thanks

**Beverleyh** · 03-21-2016, 06:40 PM

I would do it differently. Instead of switching the img src, use a span with a background image and then switch class. You would define a different image background for the new class in the CSS and apply a CSS3 transition to achieve the fade effect (IE9+)

This is crude because I'm stuck on mobile but it should give you some ideas http://jsbin.com/bevufagagi/edit?html,css,js,output

**KennyP** · 03-22-2016, 08:58 AM

Thanks Beverley, but everything I tried failed.

**KennyP** · 03-22-2016, 08:10 PM

I thought I figured it out but it didn't work.

**KennyP** · 03-24-2016, 08:28 AM

Would you please show me how to add a rollover image to "images/music-off.png"
and another rollover image to "images/music-on.png" in the following script:

Code:

<script>
$(function() {
    $("#mute").click(function(e) {
        e.preventDefault();

        var song = $('audio')[0]
        if (song.paused){
            song.play();
            document.getElementById("mute").src = "images/music-off.png";
		      
	    }else{
            song.pause();
            document.getElementById("mute").src = "images/music-on.png";
			
        }
        });
});
</script>

<audio id="audio" preload="auto" tabindex="0" type="audio/mpeg">
</audio>
<div class="style1">
 <a href="#" >
        <img id="mute" src="images/music-off.png" "class="style2"/></img>
</a>
</div>

**KennyP** · 03-26-2016, 07:25 AM

If anyone needs it, I finally worked it out.

Now there there's mouseover, or hover, to both, Play Audio and Mute Audio.

Code:

<script>
$(function() {
    $("#mute").click(function(e) {
        e.preventDefault();

        var song = $('audio')[0]
        if (song.paused){
            song.play();
            document.getElementById("mute").src = "images/music-off.png";
        }else{
            song.pause();
            document.getElementById("mute").src = "images/music-on.png";
        }
        });
});

  $("#mute").hover(function(e) {
        var song = $('audio')[0];
        if (song.paused){
            $(this).attr("src", "images/music-on-over.png");		      
	    } else {
            $(this).attr("src", "images/music-off-over.png");		      			
        }
    }, function(e) {
        var song = $('audio')[0]
        if (song.paused){
            $(this).attr("src", "images/music-on.png");		      
	    } else {
            $(this).attr("src", "images/music-off.png");		      			
        }
   });
</script>