| Blockbuster sites, amazing reunions

Share Tips

New Topic Subscription Options  

How to play a Mouseover or Hover sound for an Image or Text

Forums: Suggestions and Feedback
Created on: 04/27/21 12:10 AM Views: 3895 Replies: 10
Tuesday, April 27, 2021 at 12:10 AM

Does anyone know how to play a a sound file when you move your cursor over an image or text, also known as mouseover or hover?

We occasionally post some good jokes, as well as others that deserve the classic Joke Drum Roll and Cymbal crash to denote a bad one.

I've found a number of "how to do it" references that seem promising, but do not have the technical expertise to know how to implement them, if it is even possible.

Link #1

Link #2 which is a plugin

Installation Instructions for MediaElements.js but appears to be geared for WordPress or Drupal based websites and appears to require access to .htaccess.

Am I correct that we don't have access to .htaccess?

I've got a short sound clip so all I need is a play on hover and not necessarily a "sound off on exit".

Anyone know how to do this?

Tuesday, April 27, 2021 at 1:55 PM - Response #1

User has to set option to allow sounds automatically. If you don't mind it not working for those that blocked, etc, it's not difficult. This was done in the last few years. It's actually much simpler than the links you gave. You'll be surprised how simple.

This is sample page demo PAGE. I made an image that plays a sound and changes image size when you hover and exit over image.

This is the code

Wednesday, April 28, 2021 at 3:18 AM - Response #2


Thank you very much! I've got it set up on my home page, the last joke under the photos if you'd like to see it. Look for the cymbal.

How would I implement a mouse triggered change of image on mouseover mouseoff?

Wednesday, April 28, 2021 at 1:19 PM - Response #3

Not sure what you mean by "change of image". If it changes via a script then the script can have that added. There might be a hook that can be inserted into a section, but I've not done anything like that yet to an existing area that I have no direct control over.

That basic code is not limited to an image. Here's how to apply it to any section of text - same script as before.

So anything you 'wrap' with that div would trigger the mouse events.

Wednesday, April 28, 2021 at 10:47 PM - Response #4

Jack Vermeulen wrote:

Not sure what you mean by "change of image".

Thanks for stopping by! As you saw, I'm starting with the static image of a cymbal and your script does cause some motion, that is, the change of size. I could be happy with that, but what I'd really like to do is use that image, then, when we mouse-overed, have the image change to show a cymbal that has been struck, and moves to a different angle as it plays the sound, then moves back to the original image on mouse-off/exit.

Ideally, I'd like to find a GIF image that shows a moving image of a drum roll with a cymbal crash, but so far, I have not found what I'm looking for. I'm assuming we can call a GIF image as easily as a JPG or PNG image?

Wednesday, April 28, 2021 at 11:12 PM - Response #5

Yeah, that's pretty easy since one is in charge of the code. I thought you meant some slideshow that you didn't make. I'll make a demo.

Wednesday, April 28, 2021 at 11:26 PM - Response #6

Same demo link this is code. You can put any sort of image there including GIF. Plus one can make an array and the images progress and so on. (an array like JVideoplayer uses to make a list of videos).

This has animated cymbal and sound.

Edited 04/28/21 11:47 PM
Wednesday, April 28, 2021 at 11:48 PM - Response #7

You can add the drum roll Smile

Thursday, April 29, 2021 at 1:14 AM - Response #8

Here's the one I've got Drum Roll Cymbal Crash

Edited 04/29/21 2:32 AM
Thursday, April 29, 2021 at 12:23 PM - Response #9

That sounds great. You might want to use an MP3 version, it's 40kb vs 318kb

Here's the MP3 version

Thursday, April 29, 2021 at 6:52 PM - Response #10

Thanks Jack

New Topic  
Subscription Options: Have all new forum posts sent directly to your email.
Subscription options are available after you log in.