Menu
Hello Everyone,
On my web page, I want the user to roll their mouse wheels to play sounds and activate hyperlinks. I’ve been able to implement the first goal to some extent, but am facing problems. You can see my code in action at
Problem 1 : When you visit the above page, you’ll see that if the first action you take is to roll your mouse wheel while hovering over the yellow boxes, nothing will happen. But, if you click your mouse anywhere on the page once, and let the sound effect finish playing, then afterwards, you can roll your mouse wheel while hovering on the yellow boxes, and the sound will play. To observe this again, refresh the above page.
I’m not sure what’s happening here – it’s as if an initial mouse click anywhere on the page somehow activates subsequent onwheel events. I have the same problem when I run the code locally on my computer ( where the entire page is just my own code, as shown here, without anything added by the Blogger platform ), using Google Chrome Version 80.0.3987.122 (Official Build) (64-bit).
I want to make the page so people can use the mouse wheel roll to activate sound effects immediately after they reach the page ( without having do a click to activate the onwheel event ) – including when accessed locally from my computer – is there a way I can make that happen?
Problem 2 : I have a green box on the lower left that has a hyperlink. I want to make it so it activates with a mouse wheel roll ( onwheel event ), instead of a mouse click. Is there a way to do this?
Problem 3 : I have a beige button on the lower right that I also want the user to activate with a mouse roll instead of a click – can this be done? Also, I’ve used the same sound playing code I used for the yellow buttons, but it appears it does not work with this button – what is causing this to happen? Is there a way to make a button activate a hyperlink as well ( also with a mouse wheel roll )?
Thank you for your expertise.
Jason
`
<!DOCTYPE html>
<html>
<head>
<meta charset=’UTF-8′>
<title>Nature Farm</title>
<style>
body {background-color: hsla(0, 0%, 50%, 1);}
body {overflow:hidden;}
.box001
{
background-color:black;
padding: 1px;
margin: 1px;
width: 100%;
overflow: none;
display: block;
text-align: center;
cursor:default;
}
.box002
{
padding: 1px;
margin: 1px 0px 1px 0px;
font-size: 20px;
font-weight: normal;
font-family: sans-serif;
text-align: center;
display: inline-block;
vertical-align:top;
width: 32.5%;
cursor:default;
}
.button001
{
border: 5 px;
background: yellow;
padding: 5px;
margin: 1px 0px 1px 0px;
font-weight: lighter;
font-size: 18px;
font-family: sans-serif;
width: 95%;
display: inline-block;
cursor:default;
}
</style>
</head>
<body>
<div class=”box001″>
<div class=”button001″ onclick=”function_horse()” onwheel=”function_horse()”>
<img src=”https://static.wixstatic.com/media/ad4933_d938f962d79048438e80e1853df10ae2~mv2.jpg” height=”100″>
Gently stroke the horse to hear its sound (Roll mouse wheel inside the yellow box)
<script> function function_horse(){ var audio = document.getElementById(“function_horse”); audio.play();} </script>
<audio id=”function_horse” preload=”auto” src=”https://static.wixstatic.com/mp3/ad4933_99e62afd25c34b3793d45baf2c88299c.mp3″ ></audio>
</div>
<div class=”button001″ onclick=”function_pig()” onwheel=”function_pig()”>
<img src=”https://static.wixstatic.com/media/ad4933_b399e37a4d984c9487adb7900a103ed9~mv2.jpg” height=”100″>
Gently stroke the pig to hear its sound (Roll mouse wheel inside the box)
<script> function function_pig(){ var audio = document.getElementById(“function_pig”); audio.play();} </script>
<audio id=”function_pig” preload=”auto” src=”https://static.wixstatic.com/mp3/ad4933_490fee3f3f4545d09c204398c91fcdec.mp3″.mp3″ ></audio>
</div>
<div class=”button001″ onclick=”function_cow()” onwheel=”function_cow()”>
<img src=”https://static.wixstatic.com/media/ad4933_4812a3c15c60471eaa9b21f3be9a3c14~mv2.jpg” height=”100″>
Gently stroke the cow to hear its sound (Roll mouse wheel inside the box)
<script> function function_cow(){ var audio = document.getElementById(“function_cow”); audio.play();} </script>
<audio id=”function_cow” preload=”auto” src=”https://static.wixstatic.com/mp3/ad4933_63f2db4cd11741c5ad1c2a83adb8b489.mp3″ ></audio>
</div>
</div>
<div class=”box001″>
<div class=”box002″ style=”background:#9EFFA8″> <a href=”https://en.wikipedia.org/wiki/Mammal”> Stroke the grass (roll mouse wheel here) to read more about mammals </a>
</div>
<div class=”box002″ style=”background:white”>
<button onclick=”myFunction()” onwheel=”myFunction()” style=”background:antiquewhite” style=”font-size: 18px;”>Stroke the hay (roll mouse wheel here) to read more about farms</button>
<script> function myFunction() {} { var audio = document.getElementById(“myFunction”); audio.play();} </script>
<audio id=”myFunction” preload=”auto” src=”https://static.wixstatic.com/mp3/ad4933_c82087483a3c430cb9d242d2708a62f1.mp3″ ></audio>
</div>
</div>
</body>
</html>
`