Добавляем звуки при наведении мыши или клике на меню с помощью HTML5 - Зайцев Я - Флудилка
^ В верх

Зайцев.Я

Не стесняйтесь звонить даже за советом...


Войти
x
x

Новости

  • 1
  • 2
  • 3
  • 4
  • 5
Prev Next

Материалы по CCNA R&S

15-12-2015 Hits:3247 Новости Александр

Материлы по изучению CCNA Routing and Switching   Cisco Packet Tracer 6.2 for Windows Student Version   Видео материалы: ICND 1ч.   ICND 2ч.   ICND 3ч.   ICND...

Пишем программы для веба

04-12-2015 Hits:17629 Новости Александр

Пишем программы для веба Начиная писать программы для веба, многие начинающие программисты сталкиваются с такой ошибкой. Они рассматривают систему браузер-сервер, как...

Лабораторные работы

30-11-2015 Hits:5810 Новости Александр

 Лабораторные работы CCNA R&S   Теория - конечно очень нужная вещь , но без практики ни чего не запомнишь , ниже ссылки...

Добавляем звуки при наведении мыши или клике на меню

10-11-2015 Hits:15994 Новости Александр

Добавляем звуки при наведении мыши или клике на меню И так - всё просто , звук является частью дизайна и способность...

Обсуждение Virtumart 2

20-02-2015 Hits:4842 Новости Александр

 По моему мнению которое скорей всего субъективно - Virtumart 2 в отношении отображения цен сделан мягко говоря - коряво. И дабы...

www.radiobells.com #radiobells_script_hash

Флудилка

Обсуждение Joomla , Virtuemart 2 , Cisco IOS , Asterisk , PHP

  • Категории
    Категории Страница отображения списка категорий системы блогов сайта.
Добавлено : Дата: в разделе: Joomla

Добавляем звуки при наведении мыши или клике на меню с помощью HTML5

Добавляем звуки при наведении мыши или клике на меню с помощью HTML5

 

И так - всё просто , звук является частью дизайна и способностью проигрывать звуковые ролики напрямую из браузера практически из всех современных версий. Чтобы проиграть звук при прохождении курсором мыши определённой области нам придется полагаться на HTML5 или Flash. Но кто в наше время захочет связываться с Flash, он же жестоко тормозит?  Поэтому обратимся к HTML5, который может проигрывать звук с помощью своего элемента <audio> (Firefox 3.5+, Chrome 3+, Opera 10.5+, Safari 4+, IE 9+). Чтобы обеспечить поддержку данной функции как можно большим числом браузеров будем использовать и MP3 источники (WebKit и IE) и OGG (Firefox и Opera).

 

Открываем index.php → между тегами <header> вставляем вызов процедуры выполнения скрипта:

 

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

 

Далее вставляем скрипт в том месте страницы index.php где у нас позиция модуля меню , а точнее сразу за ним перед закрывающим тегом </div>

 

Заранее измените на свои - элементы отмеченные красным и синим цветом, как понятно красным отмечен путь к звуковым файлам ,а синим ID или CLASS модуля меню , его вы можете посмотреть кликнув правой кнопкой мыши по меню и выбрав пункт "Просмотр кода элемента"

 

<audio id="beep-two" preload="auto"> {
display:none;

}
<source src="/audio/beep.mp3" controls></source>
<source src="/audio/beep.ogg" controls></source>
К сожалению ваш браузер не поддерживает элемент &lt;audio&gt;.
</audio>

<script>$(swmenu)
.each(function(i) {
if (i != 0) {
$("#beep-two")
.clone()
.attr("id", "beep-two" + i)
.appendTo($(this).parent());
}
$(this).data("beeper", i);
})
.click(function() {
$("#beep-two" + $(this).data("beeper"))[0].play();
});
$("#beep-two").attr("id", "beep-two0");</script>

 

ВАЖНО ПРАВИЛЬНО ОПРЕДЕЛИТЬ МЕСТО, КУДА ВСТАВИТЬ ЭТОТ КОД!

 

Далее осталось залить звуковые файлы по FTP на Ваш сайт (или через панель управления хостингом) по тому адресу который Вы указали красным цветом и проверяем что получилось...

В данном примере звук будет проигрываться при нажатии на пункт меню , если хотите слышать звуки при наведении курсора на пункт меню ,то меняем .click(function() на .mouseenter(function()

 

Рабочий вариант (как демо-пример) находиться на этом сайте... По счелкайте по главному меню. Успехов!!!

 

Кому понравился звук перелистывания страниц с моего сайта, скачать его можно тут. Выберете "Сохранить как"

Поставьте свой рейтинг этой записи блога:
0

Комментарии

  • Гость
    Рома Среда, 14 Декабрь 2016

    Звук

    Если один звуковой файл, то это понятно. А если для каждой ссылки отдельный звук? Я на таком застопорился, пробовал разные варианты но ничего :( Что можете посоветовать?

Оставить комментарий

Гость
Гость Среда, 20 Сентябрь 2017