PDA

View Full Version : 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:

<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:

<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;

<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 (http://www.reneesrosegarden.com/index-test.php).

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:


<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.


<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>