BloGGood.ru

Блог Костаневича Степана

До Нового Года осталось:

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

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

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

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

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

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

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

Для начала, вам нужно подключить библиотеку 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="http://bloggood.ru/">Блог bloggood</a> || <a href="http://bloggood.ru/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="http://bloggood.ru/">Блог bloggood</a> || <a href="http://bloggood.ru/avtor/">Автор</a>
            <audio id="myaudio" preload="auto">
           <source src="1.wav">
         Ваш браузер не поддерживает аудио при помощи html5.
         </audio>
         </li>
</ul>
<ul id="menu2">
         <li>
 	            Наведи на ссылку чтобы увидеть результат №2 <a href="http://bloggood.ru/">Блог bloggood</a> || <a href="http://bloggood.ru/avtor/">Автор</a>
            <audio id="myaudio2" preload="auto">
           <source src="2.wav">
         Ваш браузер не поддерживает аудио при помощи html5.
         </audio>
         </li>
</ul>

<ul id="menu3">
         <li>
 	           Наведи на ссылку чтобы увидеть результат №3 <a href="http://bloggood.ru/">Блог bloggood</a> || <a href="http://bloggood.ru/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>

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

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

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Получай обновления блога!!! Подпишись:

Популярные статьи:

2 Ответов на комментарий - Звук при наведении курсора мышки на ссылку

  1. Тимофей

    :lol: :lol: :lol: Степан, просто супер!!!! Игрался с демонстрацией до офигивания. обязательно использую! Ещё бы библиотеку звуков какую-нибудь…

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Спасибо, Тимофей, за комментарий, рад, что понравилось! С библиотекой у меня вряд ли что получиться, а вот идею, где взять звуки, могу подсказать: например , из любимой компьютерной игрушки.

    Ответить

Добавить комментарий

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Subscribe without commenting

Метки: , , ,

Мои цели на 2017 год:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Довести количество статей до 750

4). Создать портфолио и мини интернет-магазин шаблонов

5). Создать книгу

6). Довести количество статей до 800

7). Добиться посещаемости 3000 человек/сутки

8). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 747
Количество страниц на блоге: 20
Количество рубрик на блоге: 27
Количество меток на блоге: 71
Количество комментариев на блоге: 4092