-1

This is a super simple question but I am stumped how to get the HTML to work out. I have all the javascript set up, everything in place, but I don't know how to make the HTML work.

This is what I have

<div id="door"> 
  <a href="inspect/squishdoor.html" onmouseover="document.door.src='storyimages/buttons/doorlarge.png'", "mouseoversound.playclip()" onmouseout="document.door.src='storyimages/buttons/doorlargeinv.png'">
  <img src="storyimages/buttons/doorlargeinv.png" name="door"></a>
</div>`

I'd like it to display an image and play a sound, which it does if I choose one or the other but if they are next to each other it doesn't work.

Albzi
  • 15,431
  • 6
  • 46
  • 63
user3037531
  • 1
  • 2

1 Answers1

0

You can use this code :

var $audio = $("audio_element"); //caching

$("object_element_id") .on ('mouseover', function(e){
    $audio.play();
});

$("object_element_id") .on ('mouseout', function(e){
    $audio.stop();
});

Or simply this

var audio = $("#audio");
$("play a").mouseenter( function() {
    audio.play();
}

Where audio is that audio element and play a is element which is hovered.

And how to add these function. There is one example

CODE:

<!DOCTYPE html> 
<html> 
<body> 

<button onclick="playVid()" type="button">Play Video</button>
<button onclick="pauseVid()" type="button">Pause Video</button> 
<br> 
<video id="video1">
  <source src="mov_bbb.mp4" type="video/mp4">
  <source src="mov_bbb.ogg" type="video/ogg">
  Your browser does not support HTML5 video.
</video>

<script> 
var myVideo=document.getElementById("video1"); 

function playVid()
  { 
  myVideo.play(); 
  } 

function pauseVid()
  { 
  myVideo.pause(); 
  } 
</script> 

<p>Video courtesy of <a href="http://www.bigbuckbunny.org/" target="_blank">Big Buck   
Bunny</a>.   
</p>

</body> 
</html>
Shashank
  • 1,105
  • 1
  • 22
  • 35
  • That's nice, but I don't even know how to apply that. With the last one, do I add the audio file location after the #? And how would I call on that fuction in the HTML roll over? – user3037531 May 21 '14 at 16:03
  • 1
    audio location will be there ... and if you want to know how to apply these function then please do search on google its quite easy just put it in .html file – Shashank May 21 '14 at 16:10
  • well that was the point of me asking here because I've spent an hour already on google trying to figure out how to apply it to the HTML file. That's all I'm really asking. Google provides answers on how to do one or the other not both. – user3037531 May 21 '14 at 16:12
  • See EDIT and ... you will get it how to use – Shashank May 21 '14 at 16:20
  • And yes do visit these sites .. it will help you a lot www.w3schools.com – Shashank May 21 '14 at 16:25