Главная » Все про HTML » Звук при наведении курсора мышки на ссылку

Звук при наведении курсора мышки на ссылку

2015-05-16 / Вр:23:52 / просмотров: 10256

Как-то я попадал на иностранные сайты рок-команд, и мне очень понравился эффект кнопки, при наведении на которую воспроизводился щелчок, а еще большее впечатление производили кнопки, нажав на которые, я слышал крик. Тогда я обратил на это свое внимание и до сих пор считаю, что такой эффект очень удачно может подчеркнуть стиль группы или сайта.

Я разобрался, как это работает и сегодня готов поделиться со своими читателями тем, как этот эффект реализовать. Кто знает, может как раз сегодня вам этот эффект и пригодится.

Для начала, вам нужно подключить библиотеку jquery:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

Кстати, можете прочитать мою статью о том, как правильно подключить библиотеку jquery.

Теперь между тегами <body></body> установите вот такой код:

<ul id="menu">
         <li>
 	           Наведи на ссылку, чтобы увидеть результат №1 <a href="/">Блог bloggood</a> || <a href="/avtor/">Автор</a>
            <audio id="myaudio" preload="auto">
           <source src="1.wav">
         Ваш браузер не поддерживает аудио при помощи html5.
         </audio>
         </li>
</ul>
<script>var myaudio = $("#myaudio")[0];
$("#menu a")
   .mouseenter(function() {
      myaudio.play();
   });
</script>

Строка №5 отвечает за звук, который будет воспроизводиться при наведении курсора мышки на ссылку.
"1.wav" - это название и расширение музыки.

Итак, вот абсолютно готовый код, плюс дополнительно я подключил еще два звука:

<html>
<head>
 <meta charset="windows-1251" />
<title>Воспроизведение звука в html5 при наведении - BlogGood.ru</title>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
 </head>
  <body>
<ul id="menu">
         <li>
 	           Наведи на ссылку чтобы увидеть результат №1 <a href="/">Блог bloggood</a> || <a href="/avtor/">Автор</a>
            <audio id="myaudio" preload="auto">
           <source src="1.wav">
         Ваш браузер не поддерживает аудио при помощи html5.
         </audio>
         </li>
</ul>
<ul id="menu2">
         <li>
 	            Наведи на ссылку чтобы увидеть результат №2 <a href="/">Блог bloggood</a> || <a href="/avtor/">Автор</a>
            <audio id="myaudio2" preload="auto">
           <source src="2.wav">
         Ваш браузер не поддерживает аудио при помощи html5.
         </audio>
         </li>
</ul>

<ul id="menu3">
         <li>
 	           Наведи на ссылку чтобы увидеть результат №3 <a href="/">Блог bloggood</a> || <a href="/avtor/">Автор</a>
            <audio id="myaudio3" preload="auto">
           <source src="3.mp3">
         Ваш браузер не поддерживает аудио при помощи html5.
         </audio>
         </li>
</ul>

<script>
var myaudio = $("#myaudio")[0];
$("#menu a")
   .mouseenter(function() {
      myaudio.play();
   });
var myaudio2 = $("#myaudio2")[0];
$("#menu2 a")
   .mouseenter(function() {
      myaudio2.play();
   });
var myaudio3 = $("#myaudio3")[0];
$("#menu3 a")
   .mouseenter(function() {
      myaudio3.play();
   });
</script>
 </body>
</html>

Если что не понятно по коду, пишите. А сейчас можете посмотреть демонстрацию эффекта и скачать готовый исходник.

[посмотреть демо] - [скачать исходник]