Play A Sound Clip When The User Hovers Over A Link?
Mar 23, 2010
Is it possible to play a small sound clip when the user hovers over a link? Usually the company I work for would use flash to do this but we have been asked to create it in HTML/JavaScript.
I am using a picture as a button for my site and when you click the picture it brings you to the main page of the website. My problem is that I want the button to make a sound when it is clicked on. I figured that Javascript would be the best language to use since I know nothing about Flash.
<html> <head> <title>Testing buttons</title> <script language="javascript" type="text/javascript"> function playSound(soundfile) {
How to play sound file like .wav file with javascript and/or DHTML when some one mouseover to a link. I have done this... but it only works in IE while it does not work in other browsers like firefox and chrome.
I have built an admin area for employees of a business. Once logged-in, if they sit idle for 5 minutes their session will be killed ( the time may vary depending on the employee ). I do all this with php but don't really know much about javascript.
What I would like to do is start playing a small sound repeatedly when the employees session is about 30 seconds from expiring. ( this will give the employee time to click on a link to keep their session alive )
So when the page loads, I would like to pass a length of time in seconds to a javascript. So if the employee can sit idle for 5 minutes, that would be 300 seconds. Minus the 30 seconds that I would like the alarm to be playing for which gives us 270 seconds. ( I'll pass this number to the script with PHP, the script does not have to figure this out... just to be clear. )
So I'm looking for something like this: - On page load, tell javascript to count down a specific number of seconds ( 270 ) - When the countdown reaches 0, start playing sound file repeatedly.
Sounds easy enough but I haven't been able to find anything like this yet. The only ones I've seen actually display the countdown which I don't want. I want this to count down invisibly. Oh and it should hopefully work in both IE and Firefox.
I don't have a clue what i'm doing with this and don't expect someone to just give me the code if it is actually possible (although it would be nice). I've created a site and in the admin area the page will update and tell me if there is a new message from a user, I have this page automatically refreshing every 5 minutes and wondered if it's possible to play a sound file if the term "unread" appears anywhere on the page?
Which is the best way to play sound using javascript in a controlled manner ? I need a solution which work across all browsers. This is for my bingo game page which is fully based on ajax. :)
Using JavaScript, I require a code that allows me to play .wav sound files randomly and automatically on page start-up, I also need them to loop as they are drum beats. The plan: to load my web page and hear a random drum beat that loops continuously. I need it to be compatible with most, if not all Internet browsers (Chrome, Internet Explorer, Firefox and Opera are crucial) and to state what sound file is playing on the page (allowing me to identify the looping drum beat/sound file), and if possible to provide a link to the actual sound file for download.
I am coding a page that has 6 buttons on it, from which one is the correct button (the target). I want to try and implement the following:
1) when a wrong button is clicked, the file "wrong.mp3" is played. It is less than a second long.
2) when the correct button is click, the file "right.mp3" is played. It too is less than a second long. The page then redirects/reloads. This is the code that I can't seem to get to work:
Does anyone know how (and if it's possible) to create buttons or text that will play a sound on mousedown/onclick/mouseover?
I've tried the examples on this page - http://www.phon.ucl.ac.uk/home/mark/audio/play.htm#, but the only ones that don't make my I.E. browser crash don't work in Firefox.
need a script that swap image and play sound on mouseover i already did the swaping image effect but i still need the sound to be played on mouseover .... the link is
I wrote the following small HTML page, trying to play a sound in Firefox 8 and Internet Explorer 9. The button and the <a></a> link work fine, but calling from the <script></script> tag does nothing. Does anybody know, what can be wrong, and what I can do? I'm sorry, you have to supply the oef.wav file, since I can't upload it.
I want to play a repetitive sound, and have a user click on a button each time it plays (say 5-10 times) and measure how far off he is from the sound each time.
The only way I know to play a sound in JS is bgsound, and I know how to loop and pause, so as to do the 1st part. I haven't figured out how to then test the delay in response. Since some of the responses may also be *before* the sound plays by some milliseconds, that also compicates it.
My real question is, can this even be done in JS, or should I be in PHP, ASP, or do you have another suggestion. I'm thinking it needs to run client-side so there are no network delays, and the results would be reasonably accurate on different machines. I could easily write it in VB but I don't want them to have to download anything. I'd just like it to run from the page.
I wrote a program which showing the difference of two auto generated values. its working perfectly but when i tried to set if() operator to make sound if the difference higher then 7 its not working.
I think something wrong in my code.
Orginal working code here...
But when i put if() operator under processdata() function the whole things hanged and no sound are palying.
I applied it like this way.
I dont know why its not working....i want to play and stop sound name sample.wav from my harddrive if difference range higher or lower than 7.....
I am writing a script that will replace the src of an image when the user hovers over it. I am using jquery and regex to accomplish this and have tested it on my local server but the src of the images on the live server is different and uses a non-relative path. Here is my code
$(document).ready(function() { $("img.imagefield").mouseover(function() { var regex = "^(http|https|ftp)://[a-zA-Z0-9-.]+.[a-zA-Z]{2,3}(:[a-zA-Z0-9]*)?/sites/all/files/[a-zA-Z]*"; var src = $(this).attr("src").match(regex) + "_silly"; [Code]...
I am creating a grid of thumbnails. When a user hovers over a thumbnail, the image enlarges. The *trick* is, I want the "active area" to only be the size of the thumbnail. That is, the thumbnails are 180x120, and when the mouse leaves that area, I want the large image to shrink back to normal size.
I have a working demo here:[url]
The way I accomplished this feels hacky though, and I's like to know if there's a simpler/more elegant way to accomplish it. The thumbs are an unordered list of images.
Here is my javascript:
In essence, I add an overlay div over each thumbnail which acts as the trigger to shrink the enlarged image. I thought I could use the parent <li>, as it doesn't appear to expand with the image (since I've set its size in my CSS) but that didn't work.
I'm trying to create a function to show a custom message as a tooltip when a user hovers over a table row.
My tr tag looks like this
The javascript function looks like this:
jQuery seems to be loaded correctly, as I get the alert. I don't get the tooltip, however.
What I'm trying to do, in case this is totally retarded and impossible to see, is to hover a tooltip over the clicked row instead of passing it in as a variable.
i am trying to make a script that will display a preview picture when the cursor hovers over a link. i have the basic functionality down but noticed that I should probably have some kind of delay so the user is not ambushed when they move their cursor over the links. i figured i could just implement a setTimeOut() function but i can't seem to get to work. i am including the source of what i have so far.
I'm attempting to have Javascript / jQuery play a flash player automatically based on the inbound/back link. The objective is to only play it automatically for people coming from a certain link. Is this possible with Javascript / jQuery?
I'm working on a search engine that is just like google but customized for me and my friends. I have everything working well from the scripts supplied by google however they don't allow image searches. In order to combat this I added a link that links to google images. Is there a way to make the link go to google images and display my search keyword without having to retype it? The site is [URL] if you need to look at it.
I have a query to do with windows media player. I am not sure whether what I want is done using JavaScript, but it is my best guess.
Basically, I was wondering how some websites have an advert clip or there logo appear before the actual video. The advert runs then it seems the player loads another movie.
Im looking to have an image clip transition down to not being visible than when that transition is finished have the same image visible through a .png transparency window that moves up and down with the mouse. Ive got the clip transition to work but the problem comes in that the img. under the .png moves with the mouse before the other is completly invisible. And i have other problems with the code as well but i figured i would try and figure one thing at a time.
I am using the youtube chromeless player and embeding videos with loadVideoById() method problem is that videos with an id that contains an underscore or dash dont play although they play in the normal player. I also tried replacing with a hex value in querystring i.e (%5f) but that did not work I also tried loadVideoByUrl() method with several urls but still they don't load. here is my code
function switchToPlayer(ytid){ var params = { allowScriptAccess: "always"}; var atts = { id: ytid,onmouseover: "this.playVideo()",onmouseout: "this.pauseVideo()"}; swfobject.embedSWF("http://www.youtube.com/apiplayer?border=0&enablejsapi=1&playerapiid="+ytid, 'cell'+ytid, "150", "120", "8", "scripts/expressInstall.swf",null,params,atts); } [Code]....