The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Magical text hover sound

Go down

Magical text hover sound

Post by Joost on February 14th 2018, 6:08 pm

Hello ,

I have one question about my text hover CSS code:
On my forum use i this CSS code:

Code:

a:hover {
position: relative; 
top: 1000.0%; left: 0.0%; }
a:hover {
background-image:url(http://i39.servimg.com/u/f39/12/23/10/57/sparkl10.gif); }

This make a glitter text hover. My question now, how can i add a magical sound to this CSS when you hover a link with your mouse on my forum, i have a Harry Potter forum. Very Happy
Sorry for my english. Embarassed

My forum: http://www.hpmagicworld.nl/forum (own domainname)

Many thanks.

Regards, Joost
avatar
Joost
Forumember

Male Posts : 737
Reputation : 8
Language : Dutch
Location : The Netherlands

http://ondersteun.actieforum.com/u119

Back to top Go down

Re: Magical text hover sound

Post by masesm on February 15th 2018, 6:27 am

HTML:
Code:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<audio id="sound" controls preload="auto">
   <source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" controls></source>
   Your browser isn't invited for super fun audio time.
</audio>
<a href="#" target="_blank">HELLO</a>

JAVASCRIPT:
Code:
var sound = $("#sound")[0];
$("a")
   .mouseenter(function() {
      sound.play();
   });

$("a")
   .mouseleave(function() {
      sound.pause();
    sound.currentTime = 0;
   
   });

CSS:
Code:
audio{
  display: none;
}
avatar
masesm
Forumember

Male Posts : 72
Reputation : 7
Language : Java, C++, C#, Python, JavaScript, PHP, MySQL, AWS
Location : United States

http://sicktier.forumotion.com/

Back to top Go down

Re: Magical text hover sound

Post by Joost on February 15th 2018, 9:53 am

@masesm, i have add the HTML page, CSS and Javascript (copy and paste your codes) I do not see and hear anything when i move my mouse over the hyperlinks. Embarassed

Edit, this sound will i add to the hover links. Smile
avatar
Joost
Forumember

Male Posts : 737
Reputation : 8
Language : Dutch
Location : The Netherlands

http://ondersteun.actieforum.com/u119

Back to top Go down

Re: Magical text hover sound

Post by Justice™ on February 15th 2018, 4:07 pm

The problem is the youtube link is not a sound, it is an webpage. You have to find a way to download the sound file from there(google for youtube downloader).
avatar
Justice™
Forumember

Posts : 533
Reputation : 124
Language : Romanian and English

http://board.realmsn.com

Back to top Go down

Re: Magical text hover sound

Post by SarkZKalie on February 15th 2018, 5:03 pm

Or upload to an 3rd music hosting i.e Vocaroo and then get a direct mp3 link.
avatar
SarkZKalie
Forumember

Male Posts : 644
Reputation : 93
Language : English

http://rotavn.nstars.org/

Back to top Go down

Re: Magical text hover sound

Post by Joost on February 15th 2018, 7:53 pm

I have upload the sound. How can i install this?
I do not see and hear anything when i move my mouse over the hyperlinks. Embarassed
avatar
Joost
Forumember

Male Posts : 737
Reputation : 8
Language : Dutch
Location : The Netherlands

http://ondersteun.actieforum.com/u119

Back to top Go down

Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum