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

Solved 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


Last edited by Joost on March 21st 2018, 2:50 pm; edited 1 time in total
avatar
Joost
Forumember

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

http://ondersteun.actieforum.com/u119

Back to top Go down

Solved 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 : 74
Reputation : 7
Language : Java, C++, C#, Python, JavaScript, PHP, MySQL, AWS
Location : United States

http://sicktier.forumotion.com/

Back to top Go down

Solved 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 : 769
Reputation : 8
Language : Dutch
Location : The Netherlands

http://ondersteun.actieforum.com/u119

Back to top Go down

Solved 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 : 536
Reputation : 124
Language : Romanian and English

http://board.realmsn.com

Back to top Go down

Solved 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 : 697
Reputation : 105
Language : English

http://rotavn.forumotion.com

Back to top Go down

Solved 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 : 769
Reputation : 8
Language : Dutch
Location : The Netherlands

http://ondersteun.actieforum.com/u119

Back to top Go down

Solved Re: Magical text hover sound

Post by Joost on February 20th 2018, 10:32 am

*Bump topic* many thanks for your help and time. :wouhou:
avatar
Joost
Forumember

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

http://ondersteun.actieforum.com/u119

Back to top Go down

Solved Re: Magical text hover sound

Post by masesm on February 21st 2018, 6:12 am

You're doing something wrong mate the code works just fine. Check it out here: https://jsfiddle.net/8zpa1z4m/.
Send me what you're replacing for sound link.
avatar
masesm
Forumember

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

http://sicktier.forumotion.com/

Back to top Go down

Solved Re: Magical text hover sound

Post by Joost on February 21st 2018, 9:47 am

@masesm wrote:You're doing something wrong mate the code works just fine. Check it out here: https://jsfiddle.net/8zpa1z4m/.
Send me what you're replacing for sound link.

Hello ,

I want this sound, please. Smile
avatar
Joost
Forumember

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

http://ondersteun.actieforum.com/u119

Back to top Go down

Solved Re: Magical text hover sound

Post by SarkZKalie on February 22nd 2018, 3:49 am

Direct MP3 link here
avatar
SarkZKalie
Forumember

Male Posts : 697
Reputation : 105
Language : English

http://rotavn.forumotion.com

Back to top Go down

Solved Re: Magical text hover sound

Post by Joost on February 22nd 2018, 10:27 am

Thanks @SarkZKalie !
How can i add this to my forum links ? Very Happy
avatar
Joost
Forumember

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

http://ondersteun.actieforum.com/u119

Back to top Go down

Solved Re: Magical text hover sound

Post by SarkZKalie on March 2nd 2018, 7:00 pm

Search and replace "sound.mp3" by direct link provided above
Code:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<audio id="sound" controls preload="auto">
  <source src="sound.mp3" controls></source>
  Your browser isn't invited for super fun audio time.
</audio>
<a href="#" target="_blank">HELLO</a>
avatar
SarkZKalie
Forumember

Male Posts : 697
Reputation : 105
Language : English

http://rotavn.forumotion.com

Back to top Go down

Solved Re: Magical text hover sound

Post by Joost on March 5th 2018, 8:32 pm

I have add this to my HTML page, i hear nothing. xD
avatar
Joost
Forumember

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

http://ondersteun.actieforum.com/u119

Back to top Go down

Solved Re: Magical text hover sound

Post by SarkZKalie on March 8th 2018, 8:26 am

Could you please provide your forum URL and an account test if possible? An account that can accessible to ACP is also good.
avatar
SarkZKalie
Forumember

Male Posts : 697
Reputation : 105
Language : English

http://rotavn.forumotion.com

Back to top Go down

Solved Re: Magical text hover sound

Post by Joost on March 8th 2018, 8:43 am

@SarkZKalie wrote:Could you please provide your forum URL and an account test if possible? An account that can accessible to ACP is also good.

I can send a PB with the test account logincodes, i don't give admin accounts for my forum (security reason). As you can tell what i can do. Smile
Many thanks.

Edit, PM send.
avatar
Joost
Forumember

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

http://ondersteun.actieforum.com/u119

Back to top Go down

Solved Re: Magical text hover sound

Post by SarkZKalie on March 8th 2018, 9:50 am

Thing you could do is show what you did. I didn't see any script that masesm gave you before.

For example :
A script works on all the page and audio html tag must put in overall_header template maybe
avatar
SarkZKalie
Forumember

Male Posts : 697
Reputation : 105
Language : English

http://rotavn.forumotion.com

Back to top Go down

Solved Re: Magical text hover sound

Post by Joost on March 21st 2018, 2:50 pm

This is solved now.
For another members this is the code place this in the
Code:
overall_footer_end
template.

Code:
  <script>
        $(document).ready(function(){

            $("a").mouseover (function (){

                $("#mg-song")[0].play();

            });

            $("a").mouseleave (function (){

                $("#mg-song")[0].pause();
                $("#mg-song")[0].currentTime = 0; 

            });

              $('#mg-song').hide();

        });

    </script>

    <audio id="mg-song" controls>
      <source src="HERE YOUR MP3 LINK" type="audio/mpeg" />
    </audio>
avatar
Joost
Forumember

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

http://ondersteun.actieforum.com/u119

Back to top Go down

Solved Re: Magical text hover sound

Post by APE on March 23rd 2018, 12:08 am

Problem solved & topic archived.
Please read our forum rules: ESF General Rules



avatar
APE
Manager
Manager

Male Posts : 11902
Reputation : 1179
Language : fluent in dork / mumbojumbo & English haha

http://chatworld.forumotion.co.uk/

Back to top Go down

Back to top


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